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Introduction 




■ t may be hard to remember, or it may seem like only yesterday, but some 
•ft years ago, the personal computer was introduced. The rise and rise and 
rise of the personal computer — with maybe an occasional stumble but never 
a real fall — seemed certain to be the most important social and technologi- 
cal event at the end of the twentieth century. From the "two Steves" — Wozniak 
and Jobs — and their Apple II, to Bill Gates's Windows 95, nothing, it seemed 
could ever be bigger, or more life-changing and important, than PCs. 

But, people do talk. In fact, talking is one of the main things that people are all 
about, and in the beginning, the personal computer didn't let you interact 
with others. However, first with modems, and then with networks, and finally 
through their combination and culmination in the Internet, personal computers 
became the tools that opened up a new medium of communication. The most 
visible and exciting part of the Internet is the World Wide Web. Now communi- 
cation, not computation, is the story Computers are still important, but mostly 
as the means to an end; the end result is to enable people to interact. 

If the most exciting channel of communication is the Web, the means of com- 
munication is the Web page. Ordinary people demonstrate amazing energy 
and imagination in creating and publishing diverse Web home pages. And 
although ordinary people have a desire to create Web pages, businesses have 
a need to set up shop on the Web. So the rush to the Web continues, often with 
the same people expressing themselves personally on one Web page and 
commercially on another. 

So you want to be there, too. "But," you ask, "isn't it difficult, expensive, and 
complicated?" Not any more. As the Web has grown, easy ways to get on the 
Web have appeared. And we discuss the best of them in the pages of this 
book. 



About This Book 



It's about 380 pages. 



Seriously, what do you find here? Easy ways to get published on the Web for 
any kind of Internet user we could think of. Ways to make your first Web page 
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rich with carefully arranged text, graphics, and multimedia, plus the informa- 
tion you need to go beyond your first Web page and create a multipage per- 
business Web site. And free online tools, which we describe in the 
elp you go as far as you want to go in creating a Web site. 



Foolish Assumptions 

Lots of good information is in this book, but almost no one is going to read 
every word of it — except our long-suffering editor. That's because we cover 
Web page topics from beginning through intermediate levels, including how 
to publish a Web page via Web-based services and AOL, how to use several 
different tools, and some Windows-specific and Mac-specific stuff. No one 
needs to know all of that! But anyone who wants to get a Web page up on the 
Web does need to know some of it. 

But what do you need? We assume, for purposes of this book, that you have 
probably used the Web before and that you want to create a Web page. We 
further assume that you are not yet a Web author, or that you're fairly new 
to the process. To use the information in this book, you need access to a per- 
sonal computer running Windows or Mac OS, and you need access to the 
Web — either through an online service or an Internet service provider (ISP). 
You should be running a Web browser such as Microsoft Internet Explorer, 
Firefox, or a browser provided by an online service. If you have a UNIX system 
and an Internet connection, much of this book works for you, but you don't 
have access to the online service or Web page creation tools that we describe, 
except those available directly on the Web. 

You should already have spent some time surfing the Web, or be willing to do 
so as you gather information and examples for your Web page. In other words, 
if you're wired, or willing to get wired, you're in. With that, the door to this 
book is open to you, whether you want to create your first Web page or add 
new features to one you already have. 

The figures in this book show up-to-date Windows screen shots for a consis- 
tent appearance. We wrote the instructions and steps in this book to work 
equally well for Windows and the Macintosh. 
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publisher first told us that this book was going to have conventions, 
we got out our silly hats and our Democratic and Republican paraphernalia, 
but apparently she just meant that we had to be consistent. The conventions 
in this book are standard ways of communicating specific types of informa- 
tion, such as instructions and steps. (One example of a convention is the use 
of italics for newly introduced words — as with the word "conventions" in 
the first sentence of this paragraph.) 



Here are the conventions for this book: 



v* Things that you, the reader, are asked to type are shown in bold. 

i>* New terms are printed in italics. 

Information used in specific ways is formatted in a specific typeface. In 
this book, one of the most common kinds of information displayed this 
way is HTML tags; that is, formatting information used to create Web 
pages (see Appendix B for a more complete definition). An example 
of a tag is <title>. 

We also use a special typeface for URLs (Uniform Resource Locators), 
which are the addresses used to specify the location of Web pages. For 
example, the URL for the For Dummies Web site is www . dummies . com. 

v 0 The Web is fast-paced and evolving. By the time you read this book, 
some of the URLs listed in it may have changed. 

V Representative browser versions appear among the figures. 

V Menu selections look like this: FileOSave. This particular example means 
that you choose the File menu and then choose the Save option. 

Related, brief pieces of information are displayed in bulleted lists, such 
as the bulleted list that you're reading right now. 

Numbered lists are used for instructions that you must follow in a partic- 
ular sequence. This book has many sequential steps that tell you just 
how to perform the different tasks that, when taken together, can make 
you a successful Web author. 

To make the steps brief and easy to follow, we use a specific way of 
telling you what to do. Here's an example of a set of steps: 

1. Start your Web browser. 

2. Go to the Web site www. tryf reestuf f . com. 
Note: This site is not real, just an example. 

3. Click the link that matches the type of computer you have: PC, 
Macintosh, or UNIX. 
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Partly Time: Hou) This Book 1$ Organized 

Vj I 1 \J \jIWf£p this book to a carefully plotted, precise, unvarying plan, with the 

predictable and predicted result: the book you're holding in your hands now. 

Wait a second. Isn't it true that the Web is changing every day, that Web sites 
appear and disappear like so many jacks-in-the-box — or whack-a-moles, if 
that's a more familiar example to you — and that Web companies can pop 
into and out of existence in a few weeks? So, what was that about a plan? 

Well, okay, we did change things a little along the way. Maybe a lot. But we did 
have a plan behind the book, even if it was finalized in a conference call at 5:00 
this morning. The following sections explain the parts that make up the book. 



Part 1: Create a Web Page Today 

You probably want to dive right into becoming a Web publisher. So we start 
the book with some ideas about what to do in your Web site, and then give 
specific instructions on how to get your first, simple Web page up. You can 
start with Yahoo! Geocities, a free service accessible to everyone, the new 
Google Page Creator service, or built-in AOL features. 



Part 11: Making a Specialized Page 

Free Web tools have evolved and a new generation of special-purpose 
tools has appeared. You can use the popular Flickr site to put up photos. Or 
start your own Web log — a page you can add to a little bit at a time — on 
Blogger.com. Or go nuts and start selling your stuff through a product page 
on eBay. (And yes, if you want you can do all three.) It's all easy to do. 



Part 111: Making Web Pages Work Harder 

Free services are great, but soon you'll want to use some "real" tools for man- 
aging and editing your Web pages. You'll also want to make your page richer 
with formatted text. You may even want to add META tags to allow someone 
using a search engine to easily find your pages. The you'll definitely want to 
add graphics. We tell you how to do all that and more in this part. 



Introduction 



Part IV: Polishing (and 
Dr0pB0C^' 5A/ ^ J Hour Site 

Soon, a page is not enough — you want more. You start tying pages together 
with links. Then, you want to make the pages look good, and fine-tune them 
on your machine before publishing to the Web. We take you through all the 
steps to success. 



Part V: Getting Interactive 

Most Web pages just sit there. But the fun ones interact with the user. We 
show you how to add animation, multimedia, and more interactivity to your 
Web page. Have fun! 



Part VI: The Part of Tens 

A Top Ten list is a great way to make complex information fun and easy to 
remember. Our Top Ten lists show you key DOs and DONTs of Web publishing. 



Part (/ll: Appendixes 

Appendixes in books are usually like appendixes in people: funny little things 
that get taken out of the patient in a hurry if they act up. But for this book, we 
pack in great information that can really help you. In Appendix A, a glossary 
defines Web publishing terms that may be confusing to you. In Appendix B, 
you get a comprehensive - yet brief - guide to HTML tags, the most basic 
tools that developers use to create today's Web sites. 



Icons Used in This Book 




Marks information that you need to keep in mind as you work. 
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Points to things you may want to know but don't necessarily need to know. 
You can skip these and read the text, skip the text and read these, or go 
^^n|^d^qd read both. 

Flags specific information that may not fit in a step or description but that 
helps you create better Web pages. 



Points out anything that may cause a problem. 
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In this part . . . 

m urap right in with simple Web page publishing. Use 
f~ Web-based services or your ISP to get a page online 
today. Your reward: Telling your friends and colleagues 
your Web address tomorrow! 













Chapter 1 

0< web Publishing Basics 



In This Chapter 

Getting started with Web publishing 

Putting together a Web page the easy way — and the easier way 
Examining types of Web sites 
Reviewing Web page guidelines 



rhe Web is an incredibly easy way to get your message — any message — 
out to anyone in the world who's interested in it. By putting up a Web 
page, you can stay in touch with friends and family, entertain people, help 
yourself get a job, or help yourself do your job. You can start a business, 
grow a business, or just have fun expressing yourself. 

Nearly a million people have purchased this book since its first edition more 
than ten years ago, and our readers have used every technique we describe 
in this book, and more, to get their first Web pages up and running. By read- 
ing this book, you're starting on a path that many, many people before you 
have followed to Web page success. 



Web Basics 101 

You may have begun using the Internet and Web without really getting a 
chance to learn how they work. Knowing how they work can help you 
become a better Web publisher. Here's a brief, to-the-point description. 
For more information, you can search the Web; the World Wide Web 
consortium site at www.w3 . org is a good place to start. 
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Understanding how the Web Works 





formally called the World Wide Web, is a collection of a bunch of 
ext ctmT graphics files (plus some other stuff) that make up Web pages. Web 
pages are combined into linked sets of pages called Web sites. People often 
use the term interchangeably, but technically, a Web page is a single page; a 
Web site is one or more Web pages linked together. 

The base of the Web is the Internet. The Web depends on the Internet to con- 
nect its many files together and to allow people to get to the Web. E-mail is a 
separate function that also depends on the Internet. And FTP (file transfer 
protocol) is another Internet service, used to move files from one computer 
to another. 

The Web is defined by two specifications: HyperText Transfer Protocol 
(HTTP) and HyperText Markup Language (HTML). The underlying idea 
behind the Web is hypertext — text that can contain links to other pieces of 
text stored anywhere on the Internet. The Web got its name from the way all 
the links connect the pieces of text together like a huge spider's web. 

You look at Web pages by using a program called a Web browser. A Web 
browser uses HTTP to request a Web page from a Web server. The Web page, 
in turn, uses HTTP to request any other files, such as graphics images or ads, 
that are part of the Web page. After you request a Web page, your Web browser 
pulls the files that make up the Web page from one or more Web servers and 
assembles those files into one page on your machine. 



Getting webbed 



This booktalks a lot about the Web, but doesn't 
discuss how to get on the Web as a user. Even 
if you're on the Web already, perhaps through a 
connection at work, you may also want to get 
on the Web from home. How do you do that? 

The most popular online service is still America 
Online (AOL). AOL has robust Web publishing 
features, coverage around most of the world, 
good spam blocking, kid-safe controls, and 
many other good features. You can use AOL's 
Web publishing features (see Chapter 4) 
whether you're an AOL user or not. 



MSN (Internet access from Microsoft) is also 
popular, and there are a host of other providers 
who can give you a good deal — in many 
cases, cheaper than AOL. What most of these 
other providers lack is the ability to get online 
from nearly anywhere in the world by using a 
dialup number and the wide range of services 
AOL offers. 

It's quite likely that your Internet Service Provider, 
whether it's a big name like AOL and MSN or a 
little guy, offers you space for your Web site — 
and perhaps helpful support services as well. 
Checkyour ISP's offerings as you decide howto 
get your first pages up on the Web. 
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The most popular Web browsers are Microsoft Internet Explorer, which you 
can use separately or as a built-in part of America Online software; Firefox, 
essor to the once-popular Netscape Navigator; Opera, a standards- 
t Web browser from a small company; and Safari, a browser for 
Macintosh computers. 



After a Web browser requests a Web page using HTTP, HTML steps in. Each 
Web page includes a text file written in a format called HTML (for HyperText 
Markup Language) and usually one or more graphics files. HTML defines a 
Web page's appearance and functionality. Actually, HTML doesn't precisely 
specify the Web page's appearance: Different Web browsers display various 
HTML commands differently. Also, users can specify how they want things to 
look. So what one user sees when she looks at a Web page may be different 
from what another user sees. (Chapter 8 goes into detail about HTML.) 

Getting a Web page up on the Internet is surprisingly easy. In fact, if you're in 
a hurry, you may want to go straight to Chapter 2 (for GeoCities, a Web-based 
service), Chapter 3 (for Google Page Creator), or Chapter 4 (for the fine page 
creation service on AOL and AOL.com). Follow the instructions there to get 
your first Web page up in a few hours. 



Getting up URL~y 

The Internet is the giant computer network that connects other computer net- 
works around the world. At its base, the Internet is just a giant mechanism 
for moving files from one computer to another. It finds files by using a kind of 
address called a URL (Uniform Resource Locator — which sounds like some- 
thing the Army invented to track down clothes!). The acronym URL is usually 
pronounced "you are ell," although some pronounce it "earl." Most people 
today use the term "Web address" or "Internet address" instead of "URL," 
but as a Web publisher you should know both terms. 

The address that you type to get to a Web page is a URL. For example, www . 
netsurf . com is the URL for Arthur's Netsurfer Communications Web site. A 
URL consists of three parts (see Figure 1-1): 

Protocol: The name of the communications language that the URL uses: 
HTTP (used on the Web), HTTPS (for secure Web pages), FTP, and so on. 

Domain name: The name of the server the file is on. 

V Pathname: The location of the desired file on the server. 
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The "For dummies" Way 
to Web Publishing 

Reading this book is going to make you a Web publisher — because anyone 
who puts up even a single, simple home page is a publisher on the World 
Wide Web. Congratulations in advance! 

Putting up a Web page involves a few steps that are the same no matter 
which tools or techniques you use. The steps may have different names, or 
be intermingled with each other, but they're still basically the same. Here 
they are: 

1. Create the HTML text file that's the basis for your Web page (see 
Chapter 10). 

2. Create or obtain the graphic images you'll use to spice up the appear- 
ance of your page (see Chapter 12). 

3. Create a link to the graphics in your HTML text file so they appear 
where you want them to (covered in Chapter 13). 

4. Preview your Web page on your own machine (see Chapter 10). 

5. Find Web server space (see Chapter 16). 

6. Transfer the HTML text file and the graphics files to the Web server 
(also in Chapter 16). 

7. Check that your new Web page works correctly now that it's online 
(again, see Chapter 16). 

If you use an easy-to-use tool such as GeoCities (see Chapter 2), the above 
steps are combined and most of the details are handled for you. However, it's 
good to know what's happening "behind the scenes," to help avoid problems 
or to help you tackle a more complicated site later. 
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Web terms to know 



We want to clear up how we define and use 
some Web terms: 

Web page: A text document that is pub- 
lished on a Web server, has HTMLtags in it, 
almost always includes hypertext links, and 
usually includes graphics. When you click 
the Back button in your Web browser, you 
move to the previous Web page that you 
visited, 

Web site: A collection of Web pages that 
share a common theme and purpose and 
that users generally access through the 
site's home page. 



Home page: The Web page that people gen- 
erally access first within a Web site. You let 
people know the URL (address) of your 
home page and try to get other Web page 
creators to provide links to it. 

HTMLtags: Brief formatting or linking com- 
mands placed within brackets in the text of 
an HTMLfile. For instance, the <fc» tag tells 
the Web browser to display text after the 
command in bold type; the </b> tag turns 
the bold off. See Chapter 8 for more on 
HTML 



These steps are usually simple if you're creating a basic Web page. However, 
they do get more complicated sometimes, especially if you're trying to create 
a multipage Web site. This book tells you several different, easy ways to 
create a Web page, and gets you started on expanding your Web page into 
a multipage Web site. 

When you create a Web page that has complex formatting, or that mixes text 
and graphics, you'll want to test it in the most popular Web browsers. See 
Chapter 16 for the Web addresses from which you can download Microsoft 
Internet Explorer, the America Online client, the Firefox browser, the Opera 
browser, the Safari browser, or other tools. 

For an example of a good-looking Web page, check out the For Dummies Web 
page, shown in Figure 1-2. It has an attractive layout, interesting information, 
and links to a great deal more information on the For Dummies site and other 
sites. The For Dummies Web site is very well done, but you, too, can achieve 
similar results with a reasonable amount of planning and hard work. In this 
book, we concentrate on helping you create a simple, individual Web page 
and combining several Web pages into a closely linked group of pages called 
a Web site. 
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Figure 1-2: 

The For 
Dummies 
home page 
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publishing 
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Note: The For Dummies home page is shown in Microsoft Internet Explorer, 
the most popular Web browser. For consistency, we use Internet Explorer for 
most of the Web page images in this book. 



Making simple things simple 

If all you want to do is create a simple "I exist" Web page, either for yourself 
or for your business, you don't have to go through the rigmarole of figuring 
out HTML or learning a tool, finding server space, and so on. Chapters 2, 3, 
and 4 show you several ways to get your first Web page up quickly and easily, 
using existing templates or simple HTML. Chapter 2 is for those who want to 
use GeoCities, a Web-based service; Chapter 3 is for those who want to try 
Google Page Creator, an emerging tool from the leaders in Web search, Google. 
Chapter 4 covers the popular Web page creation tools found in the AOL 
online service and at AOL.com. 

To see how easy publishing on the Web is, just turn to Chapter 2, 3, or 4 and 
get started. You'll be a Web publisher with just a couple of hours of effort. 
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Seeing HTML 



ee invented HTML at CERN 
(the European particle physics research facil- 
ity) in the late 1980s, he probably never imag- 
ined that so many people would be interested 
in seeing it. Today, most browsers include a 
command that enables you to see the actual 
HTML source that makes the page look and 
work the way it does. 

For example, in Internet Explorer, choose ViewO 
Source to view the underlying HTML file. You 



see all the HTMLtags that make the Web page 
look and act the way it does. 

After you open the HTML file, you can edit the 
text and the HTML tags, save the file, and then 
open the file again in your browser to see how 
it looks with the HTML changes. Don't publish 
someone else's page, of course — but other 
than that, experimenting in this way is a good 
way to learn. 



Making difficult things possible 

The free services we describe in this book differ in how far they allow you to 
go without outgrowing what you can get for free. If your site gets too large or 
gets too much traffic, or if you want to use your site for business, at some 
point these services ask you to start paying for the site. 

The rest of Part I describes what you need to know to get an initial, simple 
Web page up on the Web. Part II describes specialized sites — Flickr for 
photos (Chapter 5), Blogger for a Web log (also known as a blog — Chapter 
6), or eBay to sell a product (Chapter 7). Parts III and IV tell you how to 
improve your Web page, by placing graphics, adding links, and making your 
layout look attractive. Part V tells you how to add animation and interactiv- 
ity, plus expand your Web page into a Web site. 



Types of Web Sites 

The Web offers examples of nearly every communications strategy known to 
humanity, successful or not. But not every example of a Web page that you 
find online applies to your situation. For one thing, the resources of different 
Web publishers vary tremendously, from an individual putting up family photos 
to a large corporation creating an online commerce site. For another, several 
different types of Web sites exist, and not every lesson learned in creating 
one type of Web site applies to the others. 
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The major types of Web pages are personal, picture, topical, commercial, and 
entertainment sites. Increasingly, you can combine different kinds of sites in 
sites that combine different kinds of technologies. (The Web itself 
oes that, but a mashup takes combining technologies to the next 
) In the next sections, we describe some of the specific considerations 
that apply to each type of Web page and not to the others. Decide in advance 
what type of Web page you want to create, and look for other pages like it 
online. 



Personal sites 

Personal Web sites can have many goals. Often, your goal is simply to share 
something about yourself with coworkers, friends, family, and others. Personal 
Web pages are a great way for people to find out about others with similar 
interests and for people in one culture to find out about other cultures. You 
can also use a personal Web site to share family photos and events — kind of 
like a holiday letter that's always up to date. Figure 1-3 shows part of the per- 
sonal site of Jeff Lowe, who's piloting a remote-controlled blimp in the pictures. 
You can find the site at www. jef f lowe . com. 



Figure 1-3: 
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Creating a personal Web site is a great deal of fun and great practice for other 
work. But personal Web sites are often left unchanged after the initial thrill of 

nd publishing them fades. Be different — keep your Web site updated! 



As personal Web sites evolve, their creators tend to add more information 
about a single key interest, in which case the pages may become topical Web 
sites (described later). In other cases, the Web site creator adds more infor- 
mation about professional goals and accomplishments, in which case the 
Web page becomes more like a business Web site. 

Following a few simple rules helps make your personal Web site more fun and 
less work: 



What's on first? No, no. What's on second . . . The upper part of your 
Web page — the part that appears first when you bring the page up 
onscreen — needs to make the main point of the site clear. If the main 
point is "you," the first thing people see should be your name, your 
photo, and links to some of the things about "you" that are in your site. 
If the point of your site is a topical interest, business interest, or profes- 
sional self-promotion, the first area of the home page should make that 
clear, too. 

Keep it simple. Start with modest goals and get something up on the 
Web; then create a "To Do" list of ways in which to extend your site. 
Consider spinning off commercial and topical pages that reflect your 
desires and interests — each page with its own Web address — rather 
than creating a sprawling personal Web site. 



Are personal Web sites still relevant? 



Most of the activity you hear about on the Web 
these days relates to large, commercial sites, 
political sites, and so on. Personal Web sites 
have gotten somewhat lost in the shuffle as 
better-funded sites belonging to companies and 
organizations get all the attention. Never fear; 
personal Web sites are still fun and easy to 
create. And did we mention that they're fun? 

Part of what's driving the continuing interest in 
personal Web pages is that more and more 



people all over the world have access to the 
Web. (The Web recently passed 1 billion users, 
an important milestone.) The chances are 
better than ever that a high percentage of your 
friends, family, and colleagues can visit and 
appreciate your site. So don't be put off by the 
tremendous growth of business and large orga- 
nizational sites on the Web. The personal and 
fun side is growing, too; it's just getting less 
media attention than the commercial side. 
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u* Provide lots of links. One of the best ways to share your interests is to 
share information about Web sites that you like, as well as books and 
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r resources. You can put this list on your one and only Web page or 
e it a separate page that's part of a personal Web site. If you develop 
a thorough, carefully updated list of links for a specific interest area, you 
create a very valuable resource for others. 

u* Consider your privacy. A Web page is just like a billboard — except that 
100 million or more people can see it, not just a few thousand. Don't put 
anything up on your Web page that you wouldn't want on a billboard. 
And think twice before putting up information about your kids and other 
family members: You may well be willing to compromise your own pri- 
vacy, but you shouldn't make that decision for other people. 



Picture sites 

Lots of people just want to share pictures online; it's a lot easier to share pic- 
tures on the Web than to mail them around, or wait until you get together 
with people. 

You can use any of the Web page creation tools described in this book to 
create a photos-mostly Web site, although Flickr (see Chapter 5) is suited to 
this purpose alone. 

Sharing pictures is often a great joy, but also often quite boring for other 
people. Here are some tips to help keep your site interesting: 

u* Get organized. Think about how photos are going to be organized. 
Basically, your site should be like a magic photo album — with new con- 
tent at the front, and as many older photos as you want at the back. So 
use the home page to highlight the new stuff, and keep the older stuff 
moving back into archived folders. 

u* Be a photo editor. "Less is more," up to a point, even on sites designed 
to show the grandkids' latest photos off to proud grandparents. Usually, 
one or two photos of a given spot or event, whether it's a birthday party, 
a visit to an historic site, or something similar, are enough to give a flavor 
of it. 

u* Watch the megabytes. Use a photo editing program to save your files as 
JPEG images with the appropriate degree of compression (see Chapter 
12 for details). Even though many Web users today have broadband 
access, you don't want to freeze out the people who don't. 

Protect your identity. Make sure not to provide identifying information 
such as anyone's full name, address, or phone number. This helps pre- 
vent identity theft. 



Chapter 1: Web Publishing Basics 



nRnnkc Getting personal with blogs 

f~ ^\Webttf!im Blbgior short, is a sort of online logs cross the boundarit 



diary that usually includes links to Web sites 
that the user has recently found interesting — 
thus the term Web log. Blogging, or maintain- 
ing a Web log, is a whole new form of Web 
publishing. 

You can create a Web page or Web site that's 
nothing but a blog, or combine blog content with 
traditional content. Some blogs are extremely 
personal — sometimes uncomfortably so. Web 
logs are also used in big Web sites, such as 
major newspaper sites. In other words, Web 



aries between personal, 
topical, and business categories — and some of 
them are pretty entertaining as well! 

We have the somewhat old-fashioned view that 
you probably would benefit from knowing about 
Web page creation in general, not just blogging, 
so we defer a detailed discussion of itto Chapter 
6. But if yourwhole reason for wanting to create 
Web pages is to create a blog to call your very 
own, please skip ahead and read Chapter 6 now, 
and then come back here when you want to find 
more about Web pages in general. 



Topical sites 

That's "topical," not "tropical." (See the Kaua'i Exotix home page later in this 
chapter for an example of the latter.) A topical home page is a resource on a 
specific topic. A topic can be an interest or volunteer group to which the 
author belongs, in which case the page may grow over time into something 
much like a business Web site. (Creating a Web site for a group is a tremen- 
dous contribution that you can make, but it can be a lot of work; watch what 
you may be getting yourself into!) Or your topical Web page can be about any 
interest, cause, concern, obsession, or flight of fancy that you have. In this 
sense, the Web is like an out-of-control vanity press, allowing anyone to go on 
and on about anything — sometimes offering something of great value, often- 
times not. 

Making a second career out of maintaining and extending a topical Web site is 
easy, but the pay is usually nil. Here are some things to consider when you 
create a topical Web site: 

i>* What's on first? As with a personal Web page, the title of a topical Web 
page and the first screen that users see need to make unmistakably clear 
the topic that the page covers. And, to the extent possible, they must 
describe what resources the Web site offers about the topic. 

Keep focused. A topical Web site loses some of its value if it goes beyond 
a single topic. How many of the people who share your love for Thai 
cooking also share your abiding interest in rotifers? (Microscopic crea- 
tures which are too small to use in most recipes, Thai or not.) If you 
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creating separate Web sites. 



te a succession plan. If your Web site grows beyond your capacity 
aintain and extend it properly, find someone to help out or to take it 
over. The first person you should ask about taking over is anyone who's 
complaining that you're not extending the site fast enough! Decide what 
role you can handle and then ask for help in doing the rest. 



Business sites 

Business Web sites, also known as commercial sites, constitute the 50,000- 
pound gorilla of the Web, with a tremendous amount of time, energy, and 
money devoted to them. Business Web sites cover a wide range of styles 
because their goals and the expertise and resources behind them vary so 
much. This book provides enough information for you to create a competent 
"Web presence" site with several pages of contact and company information. 
But even these kinds of sites vary quite a bit, and you need to be sure that 
your company's page is well implemented. 

Figure 1-4 shows the Netsurfer home page created by Arthur Bebak, one of 
the authors. (So now you can call him "Author" Bebak!) Go surf around the 
Netsurfer site to see what a site designed and implemented by one of us 
looks like: www. netsurf . com/nsd. 

The first question to ask about a business Web site is "Who can access it?" 
Some sites are intended for the World Wide Web and everyone on it; others 
are on the World Wide Web but are password-protected or otherwise restricted 
in access; still others are on private networks and inaccessible to outsiders. 
These inaccessible networks are described as being "behind the firewall." 
Any Web page that isn't accessible to everyone is considered to be on an 
intranet, if access is limited to one company, or an extranet, if access is lim- 
ited to a group of companies that are business partners. 

Despite the wide variety of business Web sites, following just a few rules can 
help you create a page that meets your goals: 

i>* What's on first? A business Web page should make the name and pur- 
pose^) of your business immediately clear. Also, the site should provide 
easy-to-find information on how to contact your business and what 
products and services the business offers. 

V Get the right look. Telling someone you don't like their Web site is like 
telling them you don't like their haircut — they're likely to take it person- 
ally. But an ugly Web site, like an ugly haircut, can make a permanently 
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bad impression. Make sure that the look of your Web site is up to the pro- 
fessional standards set by other aspects of your business. 

Get permission. Unless you own the business, you should ask for per- 
mission before putting a company page on the open Web. You also need 
to make absolutely sure you have the permissions you need for any 
images or documents that you use before you publish your Web page. 

Inside or outside the firewall? Deciding who gets access is tricky. For 
example, a small amount of otherwise confidential information can make 
a site more valuable, but the presence of confidential information also 
prevents you from opening up the entire site to the broader public. 
Implementing access controls can also be difficult. Investigate how to 
password-protect a site, or ask a network administrator at your com- 
pany whether you can physically control access. For instance, you may 
be able to selectively allow access based on what network the user con- 
nects from. 

Find experts. Businesses similar to yours — or even colleagues, if you're 
in a large company — likely have Web sites that have a purpose similar 
to yours. Look to similar sites for guidance and inspiration. 
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i>* Monitor usage. Investing time, energy, and money in a business Web 
site requires a trade-off among the Web site and other things that those 



urces could go to. One of the crucial questions you may need to 
er in order to justify Web site maintenance or expansion is how 
much use the site gets. Investigate ways to measure the use of your site. 
A good way to start is a basic hit counter, such as the free one you can 
find at the following URL: www. statcounter . com. 



V Seek out additional resources. This book focuses on hands-on creation 
of single Web pages and simple Web sites. For a larger business site, you 
need access to additional information to help you with the planning, 
hosting, and maintenance of the site. Consider purchasing HTML 4 For 
Dummies, 5th Edition, by Ed Tittel and Mary Burmeister, for more infor- 
mation on the HTML specification, and Internet Marketing For Dummies, 
by Frank Catalano and Bud Smith (both books from Wiley), for more 
information on planning and creating a business Web site with a 
marketing bent. 



Having a Web site that's too obviously "handmade," rather than profession- 
ally created, can be embarrassing for a business. However, many sites are 
going "back to the future" with a simple, clean look that's light on graphics. 
So how do you decide whether to make your look fancy or simple? The best 
way to get a quick reality check is to look at some competitors' Web sites and 
make sure that your initial site looks roughly as good as theirs. And remem- 
ber that oftentimes the most embarrassing thing is having no site at all. 

Entertainment sites 

Entertainment is one of the top few reasons why people use the Web, and 
the number of entertainment sites continues to grow. Humorous pages and 
shared games on online services are now a major presence on the Web. 



The high expectations that people have of entertainment sites can make 
these sites some of the most demanding to create. Here are a few suggestions 
for creating entertainment sites: 

Don't start here. Don't try to figure out Web publishing by creating an 
entertainment site. It's a very demanding task. Try another type first and 
edge your way into entertainment. 

Keep it fresh. How funny is a joke the second time you hear it? You have 
to either frequently update the content on your entertainment site, or 
allow participants to provide new content through their interaction with 
one another — neither option is easy. 



Push the technology. Interactivity is also key to entertainment, which 
means going beyond HTML and static graphics. You probably need to 
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Is your page cybersmut? 



For most Web page publishers, the best policy 
with respect to putting anything potentially 
offensive in your Web pages is to keep your site 
clean. The use of gratuitous sex and violence in 
your Web pages will simply put off many people 
and put you and your Web site in a bad light. 

But what if the sex or violence is not gratuitous 
and is actually central to your point? Then send 
the authors your URL so that we can see it for 
ourselves. No, seriously: Be sure to make the 
first page a home page that warns readers that 



they may find your content offensive. That lets 
them gracefully opt out before they view what- 
ever you show. 

Even that enlightened approach may not be 
enough, however. Some Web server owners 
will drop your page if it violates their rules, and 
several countries have laws that specify what 
can and can't be on a Web page. Be sure to find 
out about the rules and laws that apply to you 
before you put anything questionable on your 
Web page. 




figure out and use at least one advanced Web technology, such as Flash, 
to make a fresh and interesting entertainment Web site. 



^pASfy^ \S Let the technology push you. The technology can give you ideas that 
A are in themselves prett; 

type animated routine, 
ment that includes fun- 
ActiveX in Chapter 18.) 



<S/ t£f\ are m themselves pretty funny Try using Java to create a Three Stooges- 

type animated routine, or use ActiveX to create a virtual reality environ- 
ment that includes fun-house mirrors. (We describe both Java and 



Thinking \lour Web Page Through 

A Web page or Web site is basically a publication, though an interactive one. 
Thinking about a few simple principles now, before you start, can help make 
your Web page much more interesting and useful to the people who see it. 
You can also revisit this section after you put up your initial Web home page; 
use these guidelines to revise your page and make it even more interesting 
and useful! 



Ask "Why am 1 doinq this>" 

Ask yourself, as you're starting, "Why am I doing this?" (As you do more and 
more work on your page, your answer to this question may come to have 
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some degree of profanity in it!) That is, why are you creating the page, and 
not having someone else create it for you? The answer helps you determine 
ortant things about the page. The following list details the most 
reasons for people to get involved in creating a Web page: 



For work: More and more people are being asked to create Web pages 
and Web sites as part of their jobs; for example, they use the Web to 
communicate with people inside or outside their companies. But unless 
you plan to be a full-time Webmaster, you need to balance the time you 
spend developing your pages with the time you spend on the other 
demands of your job. Be modest in your initial goals, and keep track of 
each step in creating and modifying your Web pages so that you — or 
the person who takes over for you — can refer to the records later. 

For fun: Fun sites are a good thing, and they are a lot of what makes 
the Web worthwhile. But if you create your site for fun, you may find 
time to work on it only after you spend time on other things, such as 
work, school, or time with friends and family. So don't be too ambitious 
in your initial plans, or you may take quite a while to finish and publish 
your page. 

V As a career move: So you want to be a full-time, or nearly full-time, 

Webmaster; or you want, in some other way, to make the Internet or Web 
part of your career? In this kind of situation, you can afford to plan an 
ambitious Web site that uses advanced tools, tracks usage, and other- 
wise gets closer to the cutting edge of the Web. To gain experience, 
create your initial Web page by using the accessible and broad-based 
tools and approaches we describe in this book. Then take your page 
closer to the cutting edge by using the more advanced techniques 
described and taught elsewhere, such as JavaScript programming as 
described in JavaScript For Dummies, 3rd Edition, by Emily A. Vander 
Veer (Wiley). 

Who knows? As famous baseball manager Yogi Berra once said, "When 
you come to a fork in the road, take it." You may not have a specific 
reason for publishing on the Web, but that shouldn't stop you. You may 
figure out a good reason after you have a little Web experience under 
your belt. Start simple, so you can score an early success in getting a 
basic Web page up, and then go from there. 



Don't spend too much time on design 

Designing a Web page is unlike designing any other kind of publication 
because you don't have as much control over the precise appearance of a 
Web page as you do with other types of publications. Different modem and 
network connection speeds, browsers, screen sizes, and font and other settings 
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within a browser vary so much that users can have very different experi- 
ences with your Web page. 

latest versions of HTML, controlling more aspects of your Web 
page's appearance is possible. Advanced sites, such as amazon.com, use 
many different aspects of HTML, as well as programming languages such as 
JavaScript, to create dense, rich layouts more like a magazine than a typical 
Web page. However, some aspects of the newest versions of HTML are not yet 
standard across different Web browsers. In this book, we stick with HTML 4.0, 
which works the same way for nearly all Web users. 

^jt$&BE/f Keep your design simple and don't spend too much time on it initially. A sim- 
^/**3L\ P^ er design is more likely to work for everyone — and be easier to create and 
update, as well. Then improve the design as you find out more about Web 
publishing and more about how people use your page. 



Big issues for big sites 



This bookfocuses on the needs of people who 
create a single Web page or a small Web site, 
and who do so on their own. Larger sites, or 
sites that need to be put up quickly or changed 
rapidly, need to have additional people working 
on them. 

If you want to create a larger site down the 
road, start thinking now about what resources 
may be available to put into it. How many 
people in your company or other organization 
work on advertising, public relations, and mar- 
keting? How many people question whether 
those jobs are real work? (Just kidding — the 
lead author, who's a marketer, wrote that!) 

You may reasonably expect your company to 
re-target some fraction of its advertising, mar- 
keting, and PR resources to support a presence 
on the Web. And what about sales? As Web- 
based business transactions take off, some 
portion of a company's sales effort becomes 
Web-based, necessitating a suitable up-front 
commitment to bring returns down the road. 

Oryour company may already suffer from Web 
burnout. Classic symptoms of Web burnout 



include massive early investment to create a 
beautiful site, months of failure to update or 
maintain the site, followed by finger-pointing 
about who wasted all that money. Usually the 
problem is that no one set goals forthe site, so 
no one managed the site's design and con- 
struction with those specific goals in mind. 
Companies often designate too few financial 
and human resources for maintenance and 
improvement of the site. If this scenario has 
happened in your company, you know the prob- 
lems that result, so be sure to establish clear 
goals for your own Web efforts. 

The most important element in adopting any 
new technology for business is a successful 
pilot project. As someone creating a smallish 
Web site, you're developing important skills and 
knowledge about the all-important conver- 
gence of your business's needs with the Web's 
opportunities. Set specific goals, strive to meet 
them, and record both your problems and your 
successes. By doing so, you position yourself 
to justify further investment of resources as the 
Web grows in importance for your company. 
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Put the good stuff first 



he Web as a giant magazine rack and the person surfing the Web as 
scanning the front covers of all those magazines. People who see 
your Web page decide whether to stay at your site — or go elsewhere — 
based largely on what they see when your page first comes up. 

If your purpose is to provide information or links, put that information first 
or, at most, one click away. For example, to create a site that provides infor- 
mation about a company, make getting contact information — your company 
name, address, phone number, and fax number — very easy. To create a per- 
sonal site that is attractive to potential employers, make clear what employ- 
ment field you're in right at the top of your Web page and make your resume 
easy to access. 

If your purpose is to draw people into your site to entertain them, educate 
them, or expose them to messages from advertisers — or to do all of these 
things at once — then the first part of the page should make a strong impres- 
sion and invite the user to go further into your site. Figure 1-5 shows the 
Kaua'i Exotix Web page, certainly one that catches your attention, located at 
the following URL: www . kexotix . com. 
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Easy Ordering 

Ordering is easy! Just 
click on the Easy Order 
Page link After making 
your selection, simply fill 
out the form that follows 
and submit or, if you 
wish, you may print your 
order results page and fax 
it to us at (808) 826-7912. 

Fast Oelivery 

At Kauai Exotix, we cut 





Opening a box of 
tropical flowers from 
Kauai Exotix is festive 
and fun - a unique gift 
that will always be 
remembered! 

Order the Aloha Gift Box 
for $54.00 



We are a small company emphasizing quality, care and 
personal attention for our customers, sending out no 
more than 30 boxes a day. This ensures that you receive 
only the best exotic flowers packed personally by us 
with the utmost care. 
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But, like the Kaua'i Exotix Web page, your home page also should help people 
who seek a quick "hit" of information; they're more likely to come back later 
waste their time during their first quick visit. 



Think twice about download times 

Putting lots of graphics in your pages is time-intensive for you because creat- 
ing or finding good graphics and placing them appropriately in your Web 
page can take a great deal of time and effort. Graphics are also time-intensive 
for those who surf your site because they can take a long time to download. 
So plan to use spot graphics (small images that download quickly) at first. 
Think twice before creating large clickable image maps or attractive opening 
graphics like those you find on the sites of large companies, such as General 
Motors or Apple. If you do use an opening graphic, keep the file size under 
20K or so. (See Chapter 14 for details.) 

You may find a good deal of coverage in the computer press, and even in 
mainstream newspapers and newsmagazines, about ongoing efforts to make 
faster access available to ordinary users. But for all the talk about cable 
modems, Digital Subscriber Line (DSL), and other advanced techniques, 
nearly half of home users in the United States are still on 56 Kbps or slower 
modems — more in most other countries. (Business users are typically on 
faster connections.) So ignore the hype — the speed at which the average 
person accesses the Web is still moving upward gradually, not leaping ahead. 
For now, be conservative in how much data you put in each page, and test 
the download times of your pages over a modem-based connection before 
you publish them. 



Knout your audience 

According to Web researchers, Web users overwhelmingly speak English as 
either a first or second language. Consequently, the great majority of Web con- 
tent, Web creation tools, and Web browsers use the English language. More 
than ten years after the birth of the Web — which happened in Switzerland — 
North America is still the "center of gravity" for Web access. This situation will 
gradually change as other countries catch up to Web penetration in the United 
States. 

Why are people online? Surveys indicate that the top reasons people use the 
Web are for information-gathering, entertainment, education, work, "time- 
wasting," and shopping. Which of these purposes do you intend for your site 
to serve? How do you appeal to people who are online? How do you help 
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them find you? The answers to these questions can help you enhance the 
appeal and usefulness of your site. 



hat kind of browsers are your users running? Surveys indicate that 
over 90 percent of Web users run Microsoft Internet Explorer; most of the rest 
use Firefox, which is based on Netscape Navigator. Both of these browsers, 
and most others that make up the remaining user base, support graphics and 
tables, and nearly all users run their browsers with graphics turned on (which 
doesn't mean that they appreciate waiting for complex images to load — 
unless those images are pretty cool!). 

For more details about who's online, what they do there, and what it means 
to you if you're creating a business Web site, see Internet Marketing For 
Dummies, by Frank Catalano and Bud Smith (Wiley). 



Use "text bites" 

As we mention earlier in this chapter, when preparing a Web site, less is 
more. Saying something with less text makes users more likely to read and 
remember it. A text bite is like a sound bite — it's a short, clearly written 
piece of text that makes a single point. 

Although you can overuse text bites, they're very important in Web page 
design. Text bites help you convey as much information as possible in the 
limited amount of time users spend looking at each Web page. And they help 
you balance the basic elements of Web page design: text, links, and graphics. 

If you want to put long documents on the Web, consider rewriting them as a 
series of text bites. If rewriting them is too much work to be practical, at least 
create short, punchy text for navigation and for introductory paragraphs to 
the long documents. Within a long document, add headers to break up the 
flow of text and provide pointers on your Web site to key areas within the 
document. Without such guidance, users may well give up in frustration 
without reaching the information they're looking for. 



Look at sites you tike 

Look at sites you like and at sites whose purposes are similar to your own. 
What's good about them? What's not? Imitate successful elements — without 
copying, which would be a violation of ethics as well as copyright laws — and 
avoid unsuccessful ones. As the development of your site progresses, keep 
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checking it against the sites you previously identified and widen your search 
to get additional ideas — on what not to do as well as on what to do. 



pal ideas exist on the Web, and your initial site is likely to contain 
one or two new ideas at best. The rest of your site may echo things readers 
have already seen, and you're better off if your site brings to mind other good 
sites, rather than bad ones. (But be careful. If you start yelling "Bad site! Bad 
site!" at your computer screen and swatting it with a rolled-up newspaper, 
you may not be allowed to have a working Internet connection much longer.) 



Plan for ongoing improvements 

As you plan and implement your initial Web page, you will, no doubt, find 
yourself creating a "To Do" list of things that you can't fit into the original site 
but want to add later, when time allows. (Creating this list for later use is 
great protection against trying to create a supersite right off the bat, getting 
stuck in the creation process, and never getting to a point where you can 
actually publish your first Web page.) This list is the start of a plan for ongo- 
ing improvements. 

Some things that you put in a Web site need to be kept current. For example, 
if your business Web page shows your company's quarterly results, be ready 
to update it quickly when the next quarter's results come out. If it lists com- 
pany officers, update it as soon as a change takes place. (Unless you're one of 
the people changed — then it's your successor's problem!) 




Web site information that is obviously out of date is one of the best ways to 
leave a bad impression of you or your organization/company and to steer vis- 
itors away from your Web site. 



Not only do you want to update the Web site, you want to avoid using "Under 
Construction" signs and otherwise apologizing for things that aren't there 
yet. Everything on the Web is under construction, which is half the fun of 
using the Web and creating pages for it in the first place. You get only one 
chance to make a first impression, and an "Under Construction" sign doesn't 
count in your favor. 




Decide hou! you define success 

Before you design and create your Web page, define what you believe can 
make it a success. For an initial effort, simply putting up something on the 
Web that clearly conveys basic information is probably enough. For follow-up 
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work, get more specific. Are you trying to reach a certain number of people 
or type of people? Will measuring page views — the number of times that 
ok at one page from your site — be enough, or do you need some 
asure of response, such as having site visitors send e-mail or call an 
800 number? Do you want to create a cutting-edge site in terms of bell-and- 
whistle features like fancy graphics and animation — and if so, are you willing 
to invest the time and money to make this site happen? Talk to people who 
do advertising and marketing in the real world, as well as to people who work 
on the Web, and get a sense of what goals they set and how they measure 
success in meeting their goals. 
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In This Chapter 

Using GeoCities for a personal Web page 
Planning before you start 
Getting registered 
Putting the wizard to work 
Taking the steps to success 



m getting your first page up on the Web seems like a tall order. So you may 
\4 not believe just how easy it is to get started. With the free GeoCities 
Web-based publishing services we describe in this chapter, you can have 
your first Web page up within a couple of hours — at no cost. (No cost to 
you, that is — your users have to suffer through advertising that the site host 
puts on each page.) You don't have to figure out everything about HTML, you 
don't have to deal with typical publishing complexities, and did we mention 
that you don't have to pay anything? 



If you're a Google fan, you may want to try Google Page Creator (Chapter 3), a 
new and promising service. And if you're a member of America Online (AOL), 
or like to use the AOL.com Web site, you can use free AOL Web publishing 
tools to get a Web page up quickly and easily, as we describe in Chapter 4. 

If not, though, you have an alternative that's as good as anything out there: 
Yahool's GeoCities site. GeoCities is the most popular site for free personal 
Web page publishing and has offered this service for many years. Since its 
inception, GeoCities has hosted the creation of well over 5,000,000 — yes, 
that's 5 million — personal Web page sites, with thousands of new sites 
added each day. With Yahoo! having acquired GeoCities, it has the resources 
to keep on growing for quite a while to come. (Other services featured in ear- 
lier editions of this book have since disappeared, a testament to the rapid 
rate of change on the Web.) 
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Follow the instructions in this chapter to become a Web page publisher on 
GeoCities. You can be a Web publisher in less time than most people take to 
king about how to get their first home page published on the Web. 
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Putting up a personal Web page accomplishes a lot of things. For one, it's fun. 
Millions of people have gotten a real kick out of sharing information about 
themselves and their interests by putting up a Web page. Many personal Web 
pages that initially start out quite simple evolve into large and popular Web 
sites focused on topics of every imaginable sort. As the number of Web users 
continues to increase, more and more of your colleagues, family, and friends 
can see your Web page, as can (of course) millions and millions of complete 
strangers. 

Creating a personal Web page is also very valuable in helping you find out 
how to publish on the Web. Until you publish something on the Web, you may 
find the notion that you can actually do it hard to believe. After you put up 
your first Web page, you may find the notion that anything can stop you from 
doing it again hard to believe! The initial success of getting up your personal 
Web page will spill over into all your future Web efforts. 

Now, you may feel that you should start out with a business Web site, a 
home page for a nonprofit organization, or something similarly serious. 
But the business or serious approach has a couple of problems: 

The "barriers to entry" — if we may use a marketing term — for a site 
that represents an organization are much higher because you're taking 
on a more complex task, and many people need to be involved. 

For a more serious site, the quality of your work has much more impact 
because you're representing a larger cause than just your personal inter- 
ests. So your fear of failure is greater. And you're undertaking this impor- 
tant task with little experience, which can make getting anything 
worthwhile done hard. 

V Finally, Web space for business sites usually costs money. So you have a 
buying decision to make before you can even get started — yet another 
barrier. 



So get on the Web first with a simple, personal Web page. Discover something 
new, have some fun, and prepare now for more ambitious endeavors later. 
And GeoCities is just the place to do it. 
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at other people have done with their personal Web sites, visit 
right now at http : / /geocities .yahoo . com. 



Figure 2-1 shows the initial home page for GeoCities. Yahoo!, after buying 
GeoCities, put its name on the pages too. Don't be alarmed if you see some- 
thing slightly different for the home page; GeoCities, like any popular Web 
site, often updates its home page. Even if the GeoCities home page has 
changed, the instructions in this chapter are likely still valid. 



Figure 2-1: 

GeoCities is 
the home of 
more than 
many 
millions of 
personal 
Web pages. 
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GeoCities initially organized the Web pages that users created into neighbor- 
hoods, with each neighborhood hosting home pages from people with a spe- 
cific set of shared interests. However, Yahoo! has stopped supporting the 
neighborhoods idea; only people who created Web pages on GeoCities in the 
1990s can still use them. As a new GeoCities user, you get a Web address 
based on your Yahoo! user ID; if you don't already have one, you're issued 
one when you first sign up for GeoCities. 
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eb tools versus Web services 

A Web publishing tool, such as SeaMonkey publishing services we describe in this chapter. 

Composer, is a program that helps you prepare Chapter 3, and Chapter 4 also include online 

content for the Web. A Web publishing service tools for preparing your Web page(s), but the 

is a support function that handles part of the free Web page hosting service they provide is 

process of Web publishing for you, such as most notable, so we refer to them as services 

hosting your Web page(s) on a server. The Web rather than tools. 



Your Web page's Web address is in the following form: www. geocities . com/ 
youruserid. This address is simpler than the Web addresses that GeoCities 
used to give people, which included the name of the neighborhood the user 
chose as well as a specific site number. If you look at existing GeoCities Web 
pages, many of them still have neighborhood addresses. 

When you first visit GeoCities, use the Search function on the GeoCities home 
page to find GeoCities Web pages on topics of interest to you. Look for topics 
related to your work, your favorite bands, computer games, celebrities — 
just about anything. Look at some pages that are still initial efforts, and then 
see what others have done with their Web pages to spruce up the place after 
they first arrived! 

Tear out the Cheat Sheet at the front of this book and tape it to the wall! 
Although you don't need to know HTML to use the services we describe in 
this chapter, knowing a little bit of HTML can help you make your initial page 
look better. See the Cheat Sheet for a list of tags that can spruce up your ini- 
tial Web page. 



Fottouring the city ordinances 

You can use the GeoCities easy-to-use editing tool to create a simple home 
page quickly and easily. You can then use HTML, FTP (see Chapter 16), and 
other tools to create and transfer more sophisticated pages to build almost 
any kind of Web site you want, up to 15MB in size. But you have to keep in 
mind the restrictions listed in Yahoo!'s Terms of Service: 

V Not for your business: You can't use this free Web page service for a 
business home page, although you can mention your business on your 
free personal home page. (Some people use their free personal Web 
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pages to "mention" their businesses an awful lot.) That means you can't 
sell products or services, advertise, conduct raffles, or display advertising 
onsorship banners. You can, however, use Yahool-supported partner- 
programs that allow you to get paid for books, music, and other 
goods sold on your site. For details on what you can't do, check the Terms 
of Service at http : / / docs .yahoo . com/ info /terms /geoterms .html. 



If you do want a business Web site, try Yahoo!'s premium Web site 
programs. You can access them from the GeoCities home page at 
geocities .yahoo . com. 

No monkey business: Yahoo! imposes restrictions on what you can pub- 
lish; obscenity, harmful or abusive content, libel, and invasion of privacy 
are prohibited, among other things. Check the Terms of Service at the 
previous URL for details. 

i>* No more than 15MB space: All your Web files together must occupy 
no more than 15MB of disk space; that's about 15,000 pages of text, or 
about 100 large, quarter-screen graphics. This restriction is not a prob- 
lem for single Web pages because only one Web page is almost certainly 
well below the limit. If you expand your Web page into a multipage site 
and the limit becomes a problem for you, you can get more disk space 
and other goodies from Yahoo!'s premium Web site programs, which are 
mentioned on the GeoCities home page. 



GeoCities or online service? 



If you are a user of an online service such as 
America Online, you have the option of creat- 
ing a free personal Web page on GeoCities, on 
your online service, or on both. We recommend 
that online service users put their first Web 
page on their online service. Why? 

The first and foremost reason is support. Online 
services are great sources of help for all kinds 
of online concerns, not least ofwhich is getting 
your first Web page up and running. You can 
easily get a lot of help from your fellow mem- 
bers and from the support personnel of your 
online service. 

Second is familiarity. You're already familiar 
with your online service. You're more able 
to take advantage of its free services than the 



services in any other kind of setup, even one as 
friendly and open as GeoCities. 

Third is community. Online services try to foster 
a sense of community, as does Yahoo! with 
GeoCities. If you're a person who values this 
feeling, you probably have already developed it 
within your online service; you may as well take 
advantage of the community that you're already 
paying for! 

So if you're an AOL user, consider going to 
Chapter 4 and following the instructions for cre- 
ating and hosting a free Web page. If not, you 
don't need to join an online service just to get 
free Web hosting service; GeoCities is fast, 
easy, and fun 
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i>* No more than 3GB per month data transfer: The amount of information 
uploaded to your site and downloaded by users must not exceed 3GB in a 
th, or GeoCities suspends service for a period of time. This maximum 
width is a lot for the average Web page — but if you post, say, a 10MB 
movie file, having it downloaded 300 times puts you over the limit. 



No guarantees: Yahoo! doesn't guarantee that it will continue to provide 
free Web page service in the future. (The company has to include this 
disclaimer to protect itself from unanticipated events, but all indications 
are that it does indeed plan to continue this free service for quite a 
while.) If Yahoo! does stop offering GeoCities, or even if you just find 
another hosting site you like better, you can always set up shop else- 
where. For now, the point is to take advantage of a valuable opportunity 



Planning Before \lou Begin 

Putting up your home page on GeoCities takes only an hour or so — not bad 
for getting a free Web page set up, hosted, and published! Even so, doing a 
few things before you begin makes the process easier, more pleasant, and 
more productive: 

Visit GeoCities Web pages. GeoCities does a good job of helping you get 
your initial Web page up, but don't you want to see what others have 
done before you get started? Use the Search function and the categories 
of Web sites to find Web pages related to your interests. 

v* Find out more about GeoCities in general by clicking and navigating 
around GeoCities-related Web pages in the Yahoo! Web site. You can dis- 
cover a lot about GeoCities by clicking around and reading press releases, 
the Terms of Service, and so on. One thing you may not discover is how 
Yahoo! can afford to give away free Web space through GeoCities. The 
answer is that free Web pages are a powerful way for sites such as Yahoo! 
to attract and retain users for its other services. Also, Yahoo! places adver- 
tising on Web pages built in GeoCities; Yahoo! makes a few pennies every 
time someone (including you) looks at your Web pages. 

Look for the URLs of your favorite Web sites. Many GeoCities templates 
let you list links to several of your favorite Web sites — but to link to 
them, you need the URLs. Recall some of your favorite sites — they may 
be listed in your Web bookmarks — and copy down the site names and 
URLs for use in creating your Web page. (Doing this research in advance 
is much easier than doing it while you're creating your Web page.) 

V Look for the URLs of Web sites of friends and family members. The 

Personal Page template that we use in the example later in this chapter 
gives you space to list the descriptions and URLs for one to four Web 
sites of friends and family members. Get the URLs before you start. 
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Plan your initial Web page. In a word processing program or on paper, 
rough out the text and Web links for your initial Web page. This way, 



re ready to go when it comes time to actually get your page up. 



a picture. Get a picture or other image onto your hard disk, in GIF 
or JPEG format, so you can easily upload it as part of your Web page. 
The picture can be of you, or be related to the topic you're interested in. 
You can get a film photo scanned into a digital file, take a picture with a 
digital camera, or even capture a digital image with a mobile phone. 
Kinko's and other copy shops have computers and software you can 
rent for scanning purposes if you don't have everything you need at 
home. Chapter 12 tells you a great deal about Web graphics. 



Getting Registered 




The steps you need to follow to sign up for a GeoCities Web page may change 
after we complete this book. If so, go to www . dummies . com and look up the 
update page for this book to get the latest instructions. 



The first step in setting up your GeoCities Web page is to apply for a Yahoo! 
user ID number. This user ID enables you to use a variety of services on 
Yahoo! and, if you're not careful, to receive e-mail solicitations you don't 
really want. If you don't already have a Yahoo! user ID, follow these steps to 
set up your Yahoo! user ID and start using GeoCities: 



1. Open your Web browser. 

The GeoCities Web site works with any browser. 

2. Go to geocities . yahoo . com. 

The screen shown earlier in Figure 2-1, or something very much like it, 
appears. 

3. If you are currently signed in as a member of Yahoo!, your username 
appears on the Web page you see. Skip the rest of the steps in this 
section. 

If you're a Yahoo! member, sign in, as described in the next para- 
graph, and then skip the rest of the steps in this section. 

Click the link, sign in to Geocities, and then enter your Yahoo! ID and 
Password in the Sign In section. Click the Sign In button. 

If you are not yet a member of Yahoo!, click the Sign In button in the 
middle of the browser window. When the Sign in to Yahoo! screen 
appears, click the Sign Up link. 

If you click the Sign Up link, the Yahoo! Registration screen appears, as 
shown in Figure 2-2. 
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4. Enter your desired Yahoo! ID and password. Retype your password. 

Any Yahoo! ID you find desirable, like most first name and last name com- 
binations (such as "budsmith" for one of the authors), or your favorite 
sports team ("sfgiants," for instance), is likely to be unavailable — one 
of Yahoo!'s existing tens of millions of users probably already has it. To 
save yourself a bunch of retries, pick a username that makes sense, but is 
likely to be unique, such as your first and last name followed by the name 
of your state or hometown ("budsmithsf," for instance). Then click the 
Check Availability of This ID button to confirm that your chosen name is 
available. Make it something you're proud of — your home page's URL 
will be in the form www. geocities . com/, followed by your Yahoo! ID. 

For your password, use six or more characters. 

5. Clear the check box if you don't wish to have a Yahoo! Mail account. 
Then enter information in case you forget your password. 

Use the pull-down menu to select a question that Yahoo! prompts you 
with if you forget your password. Enter your answer, your birthday (with 
a four-digit year, such as 1978), and your current (non- Yahoo!) e-mail 
address. Use an e-mail address that you'll have immediate access to, so 
you can complete the process of activating your account. (And enter 
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your real birthday — as my mother said, "Always tell the truth, so you 
don't have to try to remember what you told people.") 
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tried, but he couldn't do it" — despite our best efforts, we were 
le to get GeoCities to accept a Yahoo! e-mail address as the contact 
e-mail address for a GeoCities Web page. You have to use a different 
e-mail account, not a Yahoo.com account. You can use an existing per- 
sonal or work e-mail address or a friend's e-mail address. Or you can get 
a new, free e-mail account at www . hotmail . com (the most popular 
source for free e-mail), or any of several other sites on the Web. 

6. If you want to, indicate your industry and work details. 

The pull-down menus give you the opportunity to describe your job. 
This will help Yahoo! customize news and information for you on the 
Yahoo! site. The information also helps Yahoo! and its partners target 
e-mail they send you (if you don't uncheck the check box), ads they put 
on Web pages that you view, and otherwise personalize their marketing 
efforts to you. 

7. Verify your registration by entering the code (shown as a graphic). 

Look carefully — it's not always clear what the code is. This code-checking 
system helps prevent automated sign-ups used by spammers, who like 
to get lots of random e-mail addresses to send junk e-mail from (thus 
fooling spam detection programs). So this is one security precaution 
that really is for your own good. 

The bad news is, if you don't check your marketing preferences care- 
fully, Yahoo! itself will send you a bunch of e-mail — probably unwanted. 

Choose your language-country combination, such as English - United 
States. Enter your ZIP code or postal code, your gender, your occupa- 
tion, and the industry you work in. Clearing the Send Me Special Offers 
check box tells Yahoo! that you really don't want a bunch of advertising 
stuff sent to your e-mail account. 

Be sure to clear the check box unless you want to receive advertising 
e-mail from Yahoo! and its partners. Many Web sites have agreed to present 
boxes such as this one with the option unchecked, so only people who 
make the effort to click the check box get signed up, but Yahoo! makes you 
do the unchecking yourself. See the sidebar, "Yahoo! for privacy?" for more. 

8. If you want to read the Terms of Service or the Yahoo! Privacy Policy, 
right-click the appropriate link to open them in a separate window. 
Otherwise, or after you finish, click the I Agree button. 

If you click this link with a regular mouse click, the GeoCities' Terms 
of Service replaces your current browser window contents. If you click 
the Back button in the browser window to return to the signup screen, 
everything you entered so far is gone! If you make this mistake — which 
is all too easy to do — repeat Steps 4 through 8. 
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After you click the Submit This Form button, you are sent an e-mail mes- 
sage with steps to follow to access your account. Follow the instructions 
e e-mail message, and sign in to Yahoo!. Then go to the next section 
e how to begin working on your site. 



A confirmation page, Review My Account Information, appears. If it 
appears, click the link Edit Your Marketing Preferences . If you don't, 
you'll be automatically subscribed to over a dozen categories of "spe- 
cial offers." 



Yahoo! has become very pushy about this, automatically subscribing 
many users to over a dozen categories for special offers and marketing 
communications. You have to take this extra step to unsubscribe. This is 
user-unfriendly and seems to violate the spirit of data-protection laws 
that require users to explicitly agree to such sign-ups. 

10. The Account Information page appears with the Marketing Prefer- 
ences tab selected. Click any categories you don't want to be in to 
clear them, or simply click the link Clear All at the bottom of the list. 
Then make any other changes you'd like to your preferences. Click on 
the Subscriptions and Alert tabs to set up additional features. Then 
click the Save Changes button at the bottom of the screen to save 

the changes. 

Yahoo! has many services; take the time to check them out. For instance, 
Yahoo! alerts let you know when a word or name you're interested in 
appears in the news. 

11. The changes are saved. Click Back to return to the page where you 
can continue with creating your GeoCities Web page. 

You can reach the GeoCities Web site by typing the URL www. geocities . 
com into your browser's address window. The address is automatically 
remapped to geocities .yahoo . com. Web sites often give simpler Web 
addresses to the public, but remap them to other internal Web addresses for 
their own convenience. You can continue to use the www. geocities . com 
address as a starting point for your own ease of use. 



Begin Building \lour Web Site 

After you register or sign in, you may need to return to the GeoCities Web 
site. Follow these instructions to get started: 



1. Return to the Web page, geocities.yahoo.com. 

The Yahoo! GeoCities Web page appears, as shown earlier in Figure 2-1. 
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Yahoo! for privacy? 



ain policies relating to your 
privacy. Some of the highlights: 

No opt-in guarantee: Some Web sites now 
promise not to putyou on e-mail lists unless 
you opt in — take some affirmative action, 
such as checking a check box, to put your- 
self in spam's way. As of this writing, 
Yahoo! doesn't do this. So accidentally 
putting yourself on an e-mail list that then 
is used to send you advertising when sign- 
ing up for a Yahoo! service is easy. 

TRUSTe-certified: Yahoo! isTRUSTe-certified. 
This certification means that Yahoo! has 
submitted a privacy statement to TRUSTe, 
an industry privacy organization. TRUSTe is 
not a strong organization at this point, but 
at least Yahoo!, through TRUSTe, has com- 
mitted itself to putting its policy statement 
in writing and letting you see it. 

*<" Use of information: Yahoo! uses the infor- 
mation you give it, and the information it 



gathers from the choicesyou make in using 
Yahoo!, to customize your Web-surfing 
experience to your interests and to send 
you customized e-mail. 

W Sharing with partners: Yahoo! doesn't 
actually transfer data about you to part- 
ners without your permission. However, 
partners' agreements with Yahoo! may 
include access to you through Yahoo!, 
which may be a distinction without much 
of a difference. 

t>" Changing your information: To change your 
account information, log into Yahoo! with 
your user ID and password, and then go to 

http: //edit. yahoo.com/config/ 
eval_prof ile. There, you can change 
your account preferences to stop receiving 
e-mail offers or update your personal infor- 
mation and preferences. 



2. In the GeoCities Free area of the page, click the Sign Up Now link. 

The Free Web Site option gives you a free home page with the URL 
www.geocities . com/ yourname, where yourname is your Yahoo! User 
ID. You may want to use one of the paid options later, but you probably 
want to begin with a free Web site to use for practice in any case. 

After you click the Sign Up link, the GeoCities FREE page appears. 

3. Choose a topic for your Web page. 

Carefully choose a topic for your Web page. Yahoo! displays advertising 
relating to this topic on your Web page, so choose carefully (The right 
kind of advertising can actually "ad" value to your page — pun fully 
intended.) 

4. Click one or more check boxes to describe how you found out about 
GeoCities Free. 
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None of the options includes a book such as this one — the "News arti- 
cle or program" choice is probably closest. 



fy your registration by entering the code shown in graphical form. 



Carefully choose a topic for your Web page. Yahoo! displays advertising 
relating to this topic on your Web page, so choose carefully. (The right 
kind of advertising can actually "ad" value to your page — pun fully 
intended.) 

6. Click the Continue button. 

A Welcome to Yahoo! GeoCities Web page appears, as shown in Figure 2-3. 
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Welcome to Yahoo! GeoCities 



We just sent you a confirmation email explaining everything you need to know to build your very own web site. Be sure to write down 
your Yahoo: ID and password for future reference 



Your Yahoo! ID and Home Page Information 
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7. Write down your Yahoo! ID and password and your new home page's 
Web address. 

8. Click the Build Your Web Site Now! link. 

The GeoCities control panel appears. This is where you always start 
from and come back to when modifying your page. Follow the steps in 
the next section to begin building your Web page. 
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We've Off to See the Wizard 
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has developed Yahoo! PageWizards for creating an initial Web page 
quickly and easily. Wizards are an easy way to get your Web page off the ground. 

You'll see that there are other tools available, but PageWizards is the best 
way to get started with creating a true Web page. Try it first — then use the 
other tools to extend your site. 

Unlike many other Web page tools, you cannot enter HTML tags in the text 
within Yahoo! PageWizards. However, you can edit your Web page later and 
add HTML tags, as we describe in Part III. 

Use the Yahoo! PageWizards to quickly create your initial Web page: 



1. From the GeoCities control panel, click the Create & Update tab. 

The Create & Update page appears. 

2. Click Yahoo! PageWizards. 

The Yahoo! PageWizards page, part of which is shown in Figure 2-4, 
appears. 

Getting the right wizard can save you a lot of time, so looking at as much 
information as possible before choosing is worth your time. For the pur- 
poses of this chapter, we describe how to use the Personal Page Wizard; 
if you want to try a different wizard, roughly the same steps apply, but 
you need to work around the differences. 

The choices, at this writing, include 

• Quick Start: A group of page templates with roughly the same 
information about you but each with a distinctive look. 

• Popular Themes: The following three categories are some of the 
favorites that appear here: 

• Baby Announcement: Great if you just had a little one; not much 
use otherwise. If you do this, make sure to include a picture! See 
Chapter 12 for details. 

• Birthday Invitation or Party Invitation: This is fun to do, but 

online invitation services such as eVite (www. evite . com) also 
help you put up an event Web page, plus help you handle the 
inevitable e-mail messaging back and forth. Either this wizard or 
the eVite-type approach is a good option. 
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• Personal Page: This wizard is the best choice for most people who 
want to quickly create their own page. You have four choices of 
color — and yes, you can replace the little stick figure with a picture. 



Figure 2-4: 
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3. Scroll down and click the Personal Page link. 

The Yahoo! Personal Page description appears in the GeoCities Control 
Panel. 

4. Click the Launch Yahoo! Page Wizar d link. 

The Build Your Personal Page screen, shown in Figure 2-5, appears in a 
new window. It shows the six areas that you are customizing: Your name 
and e-mail address, your image (or you can keep the stick figure!), a brief 
personal description with your hobbies and interests, a description of 
friends and family, a list of favorite links (up to four), and a list of friends 
and family links. 

5. Click the Begin button. 

A screen that allows you to choose a look for your page appears: green, 
blue, yellow, or pink. 
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6. Choose a color and then click Next. 

Now you're ready to actually create your page. The next section tells 
you how. 



The Steps to Success 

After you launch Yahoo! PageWizard, as described in the previous section, 
you're just a few quick-and-easy steps away from having your own Web page. 

1. Enter your name and (optionally) the e-mail address you want to have 
appear on your Web page, and then click Next. 

If you don't want to publish your work e-mail address, or heavily used 
personal e-mail address, on the Web — where it may be copied into 
spammers' lists — consider creating a Yahoo! e-mail account just for the 
purpose of publication. Go to mail . yahoo . com to sign up; if you do 
create a new address, remember to check it. Or, just don't enter an 
e-mail address at all; you don't have to. 
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At any point in the wizard process, you can preview your page as you 
build it. Just click the Preview button where it's available. You can close 
preview when you finish with it; just don't close the underlying 
onal Page Wizard browser window! 



After you click Next, the Pick Your Picture Web page appears. 

2. Choose a picture — a picture you upload, the default stick figure 
image, or no picture. Then click Next. 

If you want to upload a picture, GeoCities allows you to pick any image 
from your hard disk in any of the following Windows formats: . jpg 
(JPEG), .gif (GIF), .tif (TIFF), .bmp (Windows Bitmap), or .png 
(Portable Network Graphics). See Chapter 12 for more on these formats 
and on obtaining images. (After you upload one or more pictures, you 
can use them by choosing them from the Pick from your account drop- 
down menu.) 

If you're on a slow Internet connection, uploading the image may take a 
couple of minutes. A very large image, or a medium-sized .bmp file, may 
even take an hour! 

Don't publish an image you don't have rights to on your Web page. No 
sense in inviting a call from someone's lawyer. 

After you click the Next button, the Describe Yourself Web page appears. 

3. Enter a description to appear in the About Me section and a list of 
your hobbies to appear in the Hobbies and Interests section and then 
click Next. 

In the description of yourself, leave out hobbies and interests; they're in 
the next section. You may want to include where you were born and live, 
what kind of work you do, and similar information. Don't give too much 
information, though; a scam artist can get credit in your name with just 
a few pieces of data such as your full name, address, and mother's 
maiden name. 

In the Hobbies and Interests text box, keep it brief, for now, but make it 
interesting; your hobbies and interests may be as individual to you as 
your fingerprint. 

After you click Next, the Enter Your Favorite Links Web page appears. 

4. Enter a description and the URL for up to four of your favorite Web 
links and then click Next. 

Enter several favorite links. And don't worry about the small number of 
links; you can change the links later, or add more links by using other 
tools. 
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After you click Next, the Describe Your Friends and Family Web page 
appears. 



Say something about your family — the one you came from, as well as 
your spouse and kids, if you have such. Emphasize anyone who has a 
personal Web page that you can link to — or anyone who will be espe- 
cially thrilled to see their name on the Web, such as kids. Again, be care- 
ful about giving too much detail, such as a full name, that scam artists 
can use. 

After you click Next, the Enter Your Friends and Family Links Web page 
appears. 

6. Type in links to friends and family members' Web pages. Then click 
Next. 

You can link to family members' Web pages. If you don't know of any, 
just leave all the entries blank. (But try Googling your friends' names 
first; you may be surprised how many are on the Web!) 

After you click Next, the Name Your Page Web page appears. 

7. Enter a page name for your personal page. Then click Next. 

The name you enter becomes part of your Web page's Web address. 
For instance, if you use the default name, "personalpageblue," the 
Web page's complete address is www. geocities . com/ yourname/ 
personalpageblue . html. We suggest you rename it something 
shorter, such as "mybluepage." Whatever you do, keep spaces and 
other characters out of the name, or Yahoo! will reject it. 

If you want to make this your site's home page, name it index . html. 
(Not a bad idea; if you do this, the URL someone needs to type to reach 
your page is simpler: www. geocities . com/yourname). You can 
always move the page around within your site later if needed. 

After you click Next, the Congratulations! page appears. 

8. Click the link to view your new Web page. 

Your new Web page appears in a window, as shown in Figure 2-6. 

The ads that appear as part of your Web page are large and, even more 
annoyingly, irrelevant; most people won't have written a book, for 
instance, or have something for sale on Shopping.com. To get rid of the 
ads, consider upgrading to one of the paid packages offered by Yahoo!. 




le a description of your friends and family and then click Next. 
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About Me: 

I'm Bud Smith, coauthor of Creating Web Pages For Dummies. The 
book is now in its Eigth Edition and has helped many people get on 
the Web. Some of the most enthusiastic e-mail messages I get are 
from teenagers who go from knowing nothing about Web 
publishing to having a Web page up in a few hours! 

Hobbies & Interests: 

I'm a big reader- but I hardly have time to read for pleasure 
anymore. I like The Economist, the Times (New York and London), 
business books and Tom Clancy novels. 
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9. Write down or save your Web address, return to the wizard and click 
Done. 

You probably want to improve your Web page quite a bit from here (don't 
forget to check your spelling and your links!), but you're off to a great start. 
Send your new Web address to your friends, and take a well-deserved break! 
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In This Chapter 

Getting to know Google Page Creator 

Registering for Google Page Creator 

Taking the steps to a successful Google Page 



■ a^oogle has long seemed like the wildest and craziest multibillion-dollar 
\J business going. Google was started by two Stanford graduate students, 
growing to hundreds of employees and millions of users before anyone even 
thought of how it might make money. 

Yet, Google is wildly successful. At the moment, Google dominates the Web, 
commanding roughly half of all search traffic — and billions of dollars in prof- 
its from advertising. 

As part of their "ready, fire, aim" approach, Google launches new Web ser- 
vices frequently, usually with a "beta" tag on the service's Web pages. Beta is 
a computer software term that means "not quite ready for wide release" — 
it's sort of like a rough draft of a product. Yet the Google mob does release its 
betas widely, allowing millions of users to try, and test, a service before it's 
completed. 

Google News, which uses software to make up a newspaper-like front page, 
was in beta for many months before Google removed the "beta" tag. Google 
Mail, which has millions of users, is still in beta at this writing — over a year 
after it was first released. (To use Google Page Creator, you must sign up for a 
Google Mail account — betas squared!) 



The fact that Google Page Creator was in beta as this book went to print 
shouldn't scare you. Google will almost certainly continue the service, and is 
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unlikely to simply drop the many users who depend on the service. But, alas, 
there are no guarantees. 




jnk that the fact that Google Page Creator is still in beta is bad news, 
the good news is that it's a slick, easy to use service. And, it has much room 
for growth and improvement, given Google's world-class capabilities in search, 
online commerce, blogging (Google owns Blogger — see Chapter 6), and 
other Web services. 

Google Page Creator may be out of beta by the time you read this. The service 
will probably still work the same way, however, just with more capabilities. 



Getting to Know the Creative 
Capabilities of Google Page Creator 

Google Page Creator has capabilities that seem pretty amazing: You edit 
your Web page, live, within a Web page! New Web technologies such as AJAX 
(Asynchronous JavaScript and XML), along with JavaScript, allow Web pages 
to take on more and more of the aspects of a "real" computer program. 

Google Page Creator includes 100MB of free storage, automatically saving as 
you work, and the use of HTML tags to directly modify the look of your page. 
(The overall layout of the page won't be changed, just the details of how the 
content looks.) 

Google Page Creator does have its downside, however. You can't move the site 
to its own URL, nor include a blog, a message board, or even any kind of form. 

The biggest bogeyman of all is advertising. The beta version of Google Page 
Creator does not, at this point, insert ads into your page. But given that adver- 
tising is Google's business, and one they're very good at, you have to wonder 
whether — or perhaps just when — your page will suddenly have ads added to it. 

If you still think Google Page Creator is for you, you must first register with 
Google, if you don't already have a Google account. 



Registering for a Google Account 

To get a Google account, follow the steps below. (It's interesting to be dis- 
cussing a Google account here, which is a pretty new idea — Google is begin- 
ning to look a bit more like an old-fashioned online service such as AOL, 
described in Chapter 4.) 
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Open your Web browser. 

Google works with any browser and can be used from a mobile phone or 
r noncomputer device. However, you'll need to use a PC to create a 
page. 

2. Go to www. google . com. 

The screen shown in Figure 3-1 appears, with some differences: 

• In most countries, you'll automatically be redirected to a national 
version of the Google home page, such as www . google . co . uk. 

• If you're already registered as a Google user, your username and 
additional options appear in the top, right-aligned line. 

• There may be a promotion for a Google service, such as the Google 
toolbar, on the page. (The Google toolbar is great; it offers quick 
access to Google search and to features such as pop-up blocking. 
Try it!) 

• The Google logo is often changed to reflect national or interna- 
tional holidays or events. 
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3. If you are currently signed in as a Google account holder, your user- 
name appears on the Google home. Skip the rest of the steps in this 
ion. Otherwise, click the Sign in link. 



n you click the Sign in link, the Google Accounts page appears; see 
Figure 3-2. 

4. If you have a Google account, sign in and skip the rest of the steps in 
this section. Otherwise, click the link Create an account now . 

The Create an Account page appears. 



^Google Accounts - Microsoft Internet Explorer 
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5. Enter a current e-mail account. 

As mentioned above, a Google mail address is a good thing to have 
anyway, especially for this purpose. Because your e-mail address is your 
account name, having a specific account for this purpose is a good idea. 
Google mail accounts can be set to automatically forward e-mail, so you 
can set up automatic forwarding of your e-mail to another e-mail account, 
and then not have to visit the account if you don't use it for much else. 
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During the test period, you can only log into Google Page Creator by using 
a Google Mail account. If you don't already have a Google Mail account, go 
. |>tp»ail . google . com and create one. 

B.V^toose a password, and then reenter it. 

Enter a password for your Google account. The Password Strength 
meter automatically assesses your password to make sure it fits the 
rules. You can click the link Password Strength to see an instant assess- 
ment of your chosen password. 

7. Click the check box Remember Me on This Computer to automatically 
log in to your account when you visit Google. 

You are given this option again in the future when you sign in, so you don't 
need to click the check box unless you're sure you want this enabled. 

8. Clear the check box Enable Personalized Search if you don't wish to 
have your search results customized as a result of previous searches. 

Personalized Search seems like a good thing, but there are a few reasons 
you may wish to avoid it: 

• Enabling Personalized Search means Google is gathering data on 
your searches, which you may not want. 

• Enabling Personalized Search means that you'll get different results 
than other people do; if you're a writer or researcher, for instance, 
you may want uncustomized search results. 

Of course, if you do enable personalized search, you can also get uncus- 
tomized results at any time by logging out of your Google account. 

9. Choose your country from the pull-down list. 

10. Type the verification characters. 

As with many other sign-ups, Google requests that you type in the char- 
acters in the verification graphic. 

11. Type in the word shown onscreen. 

Type the word shown onscreen. This step ensures that a real person is 
filling out the registration. 

If you are visually disabled and using a screen reader, click the image of a 
person in a wheelchair. The characters are read aloud for you to type in. 

12. Review the terms of service; click the Printable Version link to see an 
easy-to-read, easy-to-print version. For details, click the Terms of 
Service link or the Privacy Policy link. 



13. 



Reply to the verification e-mail. 
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icy is detailed — there are 
separate details provided for most of its sepa- 
rate services — and easy to understand. Here 
are some highlights: 

Combining information: Google combines 
information from your registrations for ser- 
vices, cookies, and your visit to Google 
Web sites. 

*<" Third parties at arm's length: Only aggre- 
gated, non-personal information is pro- 
vided to third parties. 



A different kind of service: If Google is 
served with a request for personal infor- 
mation as part of a legal process, they may 
comply with it. 

v 0 See yourself: Google commits to efforts to 
make your personal information available to 
you, and to allowyouto correct or delete it. 

v 0 Yes to opt-in: In its detailed privacy policy, 
Google commits to requiring your opt-in 
consent for the sharing of any sensitive 
personal information; that means you have 
to explicitly click on a check box before 
your information is shared. 



A verification e-mail is sent to the e-mail account you entered as part of 
this process. Retrieve the e-mail message and use the link to verify your 
account — either by clicking on the link, if your e-mail program supports 
that, or by cutting and pasting the link into the address area of your Web 
browser. 

After you reply to the e-mail, you've finished creating your account. 



Creating a Google Page 

After you're registered, it's time to start creating your page. Google Page 
Creator gives you a lot of options; the steps below take you through some of 
the most important ones: 

1. Go to the Google Page creator page at pages . google . com. 

If you are not already signed in, the sign-in area appears in the upper 
right corner of the page. 

2. If you are not already signed in, enter your password and click the 
Sign In button. 

The Google Page Creator sign-in page appears. 

3. Review the page, including the Terms and Conditions at the bottom, 
and then click the check box at the bottom to agree to them. 
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The Edit Page screen for Google Page Creator appears; an example, after 
the layout has been changed, is shown in Figure 3-3. 

4. Try different layouts by clicking the Change Layout link. 




Although the Change Look button seems to come before it, it's actually 
better to choose the layout first. The layout underlies everything else, 
so choosing it early makes it less likely that you'll need to make big 
changes later. 



5. Click on the layout you want. 

At this writing, there are only four layouts, as shown in Figure 3-4. The 
classic layout for a Web page is the second one, with a title across the 
top, a navigation area on the left, and a main content area. 

When you select a layout, you are returned to the main Google Page 
Creator page, now sporting your new layout. 

6. Try different looks by clicking the Change Look link. 

Before you start entering content, take a stab at changing the look of the 
page. When you click the Change Look link, a collection of looks appears — 
more than 40 at this writing. But the "looks" are a bit generic — they don't 
necessarily reflect the details of your selected layout. 
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7. Try different looks by clicking Preview under each look. 

Preview brings up a new window with a sample page, using the pre- 
viewed look. 

Choose the look carefully; although you can change it later, the look 
affects all the other choices you make as you design the page. If you 
change it later, you may find yourself wanting to change everything else 
on the page as well. 

8. Select the look you want. 

Choose Select; you'll return to the main Google Page Creator page, with 
your page shown in the new look. 

9. Edit the page title. 

The initial page title is your e-mail address plus the words Home Page. 
You'll look like a real amateur if you leave it unchanged, so click on the 
title and change it. 

10. Highlight the new page title. Try as many formatting options as 
possible — bold, italic, header sizes, and more. 
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Use every formatting option you can on the title to get a feel for them: 
Bold (the b button), italic (i). 
Font (F) and size (tT). 

• Left, center, and right alignment. 

• Header sizes versus normal text (A in different sizes and formats). 

11. Enter new content. 

Enter your chosen content. Possible topics include 

• Information about your friends and family 

• A description of your work 

• Favorite places on the Web, with links 

Use the formatting options to arrange your content. Be sure to provide 
plenty of headers to break up long blocks of text; Web visitors tend to 
scan, rather than read, and headers help make that easy. 

12. Publish your page. 

Click the Publish button. Your page appears at the URL e-mail name. 
googlepages . com. Click the View It on the Web link to see it. An exam- 
ple is shown in Figure 3-5. 



Figure 3-5: 
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Chapter 4 

web Publishing with 
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In This Chapter 

Finding the best ISP 

Getting your page up with AOL or CompuServe 
Starting out with 1-2-3 Publish 
Publishing your first home page 




lthough the easy-to-use, open, ungovernable World Wide Web may seem 
as though it is going to wipe out traditional, closed, monitored online 



services such as America Online (AOL), circumstances are not really working 
out that way The online services are adapting quickly. They have become 
gateways to the Web, and in some cases offer easy-to-use Web publishing ser- 
vices that include hosting your Web page for free. 

If you already use AOL, it's probably the best place for you to start experi- 
menting with Web publishing. You already know the interface, you can 
quickly find online forums and discussion boards for Web publishing, and 
you can take advantage of the easy-to-use Web publishing features that AOL 
has scrambled to provide. CompuServe, owned by AOL, has similar Web pub- 
lishing features. 

If you aren't an America Online user, the quickest and cheapest way to get 
your first page up on the Web is to use GeoCities, the Web-based service we 
describe in Chapter 2. Or Google Page Creator, the alternative Web-based ser- 
vice described in Chapter 3. But if you are an AOL user, you may well be 
better off using your online service for Web publishing. America Online has 
strong features for intermediate Web publishing, including support for both 
Windows and Macintosh, several megabytes of free server space, and (at the 
time of this writing) no restrictions on using free Web pages for business. 
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You can also use the Web publishing services described here within aol . com, 
AOL's online page. Just visit hometown . aol . com. So you don't have to be an 
ompuServe user to access AOL's Web publishing tools. 



Choosing the Best Internet 
Sen/ice Provider 



You certainly have freedom of choice when choosing the best way to get 
online. You used to have to choose between an online service such as AOL or 
CompuServe, which offered limited Internet access, or an Internet service 
provider, which had little online community or other online service features. 
Now you can get a range of online service-type and ISP-type features from a 
range of providers, all referred to as ISPs. And your choice truly is free, at 
least for a while — most ISPs offer free sign up and a free trial period. You 
can try two or three different services before making a long-term choice. Just 
remember to resign from any service that you stop using, or the $20 or so a 
month charge to your credit card may go on forever! 

You also have the option of using a traditional Internet service provider (ISP), 
such as Earthlink. Earthlink has more and more built-in content and services, 
like America Online or CompuServe, but is really focused on open Internet 
and Web content and tools. Other ISPs vary in the amount of built-in content 
and services they offer. 

With any ISP, you can use GeoCities (described in Chapter 2), Google Page 
Creator (see Chapter 3), or another free Web page publishing service to 
create your first Web page. With AOL, you also get the option of using built-in 
Web publishing services. 

America Online is the biggest and best traditional online service. Because 
it's far bigger than any other online service — more than 15 million users, 
although this number is dropping as newer, faster services get more users — 
it has more people to chat with online, more areas with existing content, and 
more people to support you. Figure 4-1 shows the clean and attractive inter- 
face of America Online. 



However, more and more people use a local or national (not global) broad- 
band provider, which is usually several dollars a month cheaper than AOL. 
Although such services lack AOL's depth, features, and customer service, 
such users are simply going to the Web for information. 
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Figure 4-1: 
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The Web site of America Online is among the most popular sites on the World 
Wide Web. You can even use the AOL site to check your AOL e-mail, using a 
Web browser. 

Broadband access is, of course, increasingly popular. If you plan to host multi- 
media content such as music or movies on your Web site, broadband access is 
simply a necessity; even if you don't plan to do this, you probably want broad- 
band access for faster Web surfing. Broadband also enables you to quickly 
download programs that you can use in creating content for your Web site. 

AOL also has an advantage in supporting dialup access worldwide; if you 
travel a lot, you may still find it convenient to have dialup access when you're 
staying somewhere that lacks broadband wireless connections. As the number 
of such places decreases, dialup access becomes less and less needed. 

Some areas may not have any broadband access; some may have access via 
fast DSL phone lines; others may have access via cable TV, or both. Check the 
AOL Web site (www . aol . com) to see if you can get AOL broadband access 
from them at your home or office. Also check with your local cable and satel- 
lite TV companies to see what they offer. 
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Some services offer language-specific support. If you want to work in a lan- 
guage other than English, ask others who speak your language and who live 

' ^J'pl^J 1 ' 16 C ' ty ° r re ^'° n a k° ut aval ' aD ' e services. 

Online services are a good place to start your initial Web publishing efforts: 
low prices, good tools, lots of support — kind of like running downhill with a 
tailwind. America Online offers the following: 



No extra charge for Web page authoring: America Online offers free 
support for Web page authoring; you pay only the normal access 
charges for creating and viewing your page and other Web pages. 

Easy Web page authoring tools: AOL has a very easy-to-use tool called 
1-2-3 Publish, and a more capable tool called Easy Designer, both inte- 
grated into the service. America Online also offers step-by-step instruc- 
tions for using HTML and free add-ins to your Web pages and allows you 
to use your free server space to put up business Web pages. 

Free Web server space: One of the biggest problems in creating an ini- 
tial Web page is getting space on a Web server. America Online offers 
free Web server space for personal and business home pages. 

No file transfer hassle: Getting your files onto a Web server is often a 
pain; AOL's easy-to-use Web page authoring tools can make getting your 
information online easy. 

Upgrading to HTML tools: AOL enables you to use separate HTML tools 
to create your own custom Web page and then to transfer your files to 
their server for free hosting. 



CompuServe gives you free access to AOL's 1-2-3 Publish Web publishing tool 
offered by AOL. CompuServe offers free templates and the ability to upload 
your own HTML files and graphics to a free, 20MB space. You can also add 
counters and other cool features and you can use your Web page for your 
business. (No business transaction capability is supported, though, and you 
aren't allowed to add your own.) 



If you are a CompuServe user and want to use Easy Designer and other AOL 
Web publishing tools, you can do the same as anyone else with Web access: 
Visit the AOL Web site at www . aol . com and you can get right in. 



What's a Mac user to do? 

The answer is .Mac (pronounced "dot Mac"), your own online access first — AOL is one 
Apple's Web publishing service. You must get online service with strong Mac support. 
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America Online, during its fast-growing years, acquired its biggest rival, 
CompuServe. (This was a couple of years before it acquired something even 
larger — the media company Time Warner.) The 1-2-3 Publish tool, which we 
describe in this chapter, works in both AOL and CompuServe. 

If you're not an America Online or a CompuServe user, GeoCities (described in 
Chapter 2) is an excellent choice. Anyone with Web access can use GeoCities. 
But if you're an America Online or CompuServe user, you have a choice between 
America Online's built-in services — available in CompuServe as well — and 
GeoCities. We suggest that you start with AOL's tools if you have that choice. 

Why? The answer isn't really that AOL's tools are better; they're roughly 
equivalent to the GeoCities tools. The difference is community. Many AOL 
users spend more time in AOL's online forums than on the open Web. And in 
those forums you can quickly get answers to your questions about using 
AOL's tools to get your initial Web page up, and then improve it from there. 
The same goes for CompuServe. 

If you're already an America Online user and are still on an early version of 
the service, do upgrade to the latest version before proceeding. All it costs 
you is a little time, and you get access to all the Web publishing capabilities 
we describe in this chapter. 

Use this chapter to get started with the America Online tools and create your 
first Web page. Then use the more advanced information later in this book 
and the online forums in America Online to push your page to the next level. 



Looking into What AOL Offers 

America Online has several parts to its Web publishing service: 

W 1-2-3 Publish: 1-2-3 Publish lets you use a template to quickly create 
your first Web page. It removes most of the initial barriers of getting a 
Web page up quickly and easily. However, it doesn't let you create your 
own custom Web page design or work in HTML. 1-2-3 Publish is also 
available on CompuServe. 

W Easy Designer: Easy Designer is the next step up from 1-2-3 Publish. It 
lets you drag and drop text and images and use HTML to extend the 
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capabilities of your page. (Easy Designer replaces the Personal 
Publisher and Personal Publisher 3 services from previous versions of 
AOL software.) 



Manager: For a really big site, AOL allows you to manage files 
directly. That way you can use straight HTML, or any Web page design 
tool, to create your pages. 



We recommend that you use 1-2-3 Publish to get that all-important first Web 
page up, and then continue editing your Web page with Easy Designer. The 
next section tells you how to create your first Web page with 1-2-3 Publish; it 
should take 30 minutes or less. You can follow the instructions for 1-2-3 
Publish in CompuServe as well. If you already know something about Web 
page creation and want to go straight to a more challenging environment, try 
Easy Designer first. (At this writing, you don't have access to Easy Designer 
from CompuServe.) 




As mentioned previously, you can visit Hometown on the Web to get access 
to all of the AOL publishing tools at hometown . aol . com. 



Planning Before \lou Start 

Putting up your first home page, using AOL's 1-2-3 Publish tool, takes only a 
few minutes because you skip so many hassles that normally come with Web 
publishing. But, as with the GeoCities process we discuss in Chapter 2, you 
can help yourself by doing a few things in preparation: 

Visit AOL Hometown Web pages. To see other users' Hometown Web 
pages, enter Hometown as a keyword at the top of the page and click Go. 
You see the AOL Hometown main page, which allows you to search for 
Web pages by keyword, or to visit Web pages in various communities. 

t<" Look for the URLs of your favorite Web sites. Many AOL Hometown 
templates let you list links to several of your favorite Web sites — but to 
link to them, you need the URLs. Surf around the Web and find the URLs 
of several sites that reflect your interests, or of sites of friends or family 
members. (The more obscure your favorites are, the better!) 

Plan your page. Use a word processing program or a few pieces of note- 
book paper to plan your initial Web page. (Use the paper for drawing 
only — neither origami nor paper airplanes translate well to the Web.) 
Rough out what text you want to put in and what URLs to include. Then 
you can be ready to focus on the mechanics of getting the Web page 
right. 
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is 0 Scan a picture. Many personal Web pages look much better with a 
picture — of you, or of something relating to the topic you're interested 




can a picture of yourself and use an image editing program such as 
(toshop to save it in a Web-ready format such as GIF or JPEG. (For 
more on graphics for the Web, see Chapter 12.) If you lack appropriate 
software, go to a copy shop, such as Kinko's, that rents scanners and 
time on personal computers with appropriate software. You can also ask 
your photo developer to put your pictures on disk; most photo develop- 
ers do this. 

For users' convenience, try to reduce the file size of the picture to 30K 
or less before adding it to your Web page. (A 30K image takes about 10 
seconds to download when a user is viewing your page with a 56K 
modem.) See Chapter 12 for more. 



Getting a Start vOith h2~3 Publish 

Beginning Web publishers can choose 1-2-3 Publish, the very easy-to-use tool 
that helps you put a Web page up fast, or Easy Designer, a more flexible tool 
that helps you do more with your Web page. Easy Designer can work with 
Web pages that you create initially in 1-2-3 Publish. 

You can get to 1-2-3 Publish in CompuServe by typing ourworld in the Web 
address bar at the top of the CompuServe application window and then 
pressing Return. Then click the 1-2-3 Publish link in the upper-right corner. 
(The text link says 3 Steps to Happiness .^) You can skip to step 5 in the follow- 
ing steps. 

1-2-3 Publish offers the best of both worlds: an easy-to-use tool that isn't lim- 
iting because you can later use Easy Designer or add-ons that AOL makes 
available to improve your initial page. Follow these steps to create your first 
Web page with 1-2-3 Publish: 

1. Start America Online. 

The Welcome screen appears. 

2. Go to Hometown. 

Enter Hometown in the keyword area at the top of the screen and 
click Go. 

3. From the Hometown screen in AOL, click the Make Your Own Web 
Page link in the upper-right corner (under the header, Easy as 1-2-3) 

The 1-2-3 Publish starting screen appears, as shown in Figure 4-2. 
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Figure 4-2: 

1-2-3 
Publish 
gives you 
scores of 
choices. 
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Welcome to 1-2-3 Publish, the easy way to build youi own Web page! Even it you've never 
created a Web page before, you can get your very own page on the Web in minuter - rt's as 
easy as 1 -2-3! 



• Fii it decide ■-.■hat you want to make youi '.■"■.''eh tisae iboul. Choose one ot the 1 4 
categories below and then pick a template. 

• You can choose the look you want by picking the graphics and colours Then you 
can add your own te:<t to the page 3nd upload your own pictures 

• Ust your favourite links tor visitors to tollow and dont target to add your email 
address so thev can yet in touch and tell you what they think ot your great new 
Web page. 

Heie .ne a tew of out most popul.ii templates: 




4. Scroll down and examine all the different templates to see what 
options are available. 

You can use one of the top-level templates or one of the more specific 
templates farther down for your first Web page. However, for the pur- 
poses of these steps, we avoid the other templates and use the All About 
Me template. 

5. Under Personal Pages , click the All About Me link. 

A page with a series of steps appears, as shown in Figure 4-3. The next 
section describes how to follow these steps. 



Publishing \lour First Home Page 

Use the template called My First Home Page Template to create your first 
home page. (If you use a different template, the steps are basically the same, 
but you have to adjust to fit different details as you go along.) After you reach 
the screen for your first home page, as described in the previous section, 
follow these steps: 
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Figure 4-3: 

You're just a 
few steps 
away from 
your Web 
page. 
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your page and enter information about yourself below 



About Me Template 

Step 1 ' Choose a background colour f oi your page 



<«■ r r r 

Step 2: Choose a picture lor the top of your page (Tip: Select No Image if you don! want a picture at the top 
of your page .) 



r 




t mi 





Step 3: Enter a title tor your profile page. For example, About Me 



lAboutMe 
Done 



L q- Window ( 1 ) _ - , L _| Btoihing. Pop 



Up* (0) t , L pBudti...Vt Vault-. 



1. Set up the overall look of the page. 

The first step is to select the background color for your page; choose a 
color from among the options shown. A white background gives you the 
most flexibility in choosing other graphics, adding pictures, and so on. 

2. Choose an image for the top of your page. 

The choices are Welcome, All About Me in yellow, Welcome to My Page, 
All About Me with hearts, All About Me in beige and blue, or no image. 

3. Add a title and a picture to your page. 

Enter a title that describes your page. Include a keyword that people can 
search with — if your page includes information about your interest in 
horses, put "horses" in the title. Or put your name in the title to allow 
your friends to search for your site easily. 

You can also upload a picture for your site. Click the Browse button to 
search your hard drive for a picture. To find more about Web graphics, 
see Chapter 12. 



4. Choose a divider style. 
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Choose one of the six divider styles. This is an important choice 
because the divider between sections has a surprisingly strong effect on 
overall look of your Web page. Each of the six divider styles matches 
of the six choices of image at the top of the page (see Step 2), in 
order — the first divider style matches the first image, and so on. The 
final choice, no divider, goes with anything — but doesn't help break up 
your page. 

5. Enter one to three sections of text. 

Here's the beef of your page. Enter a title and text for up to three sec- 
tions describing you, your interests, hobbies, and so on. Enter a title and 
basic facts about you, your interests, your hobbies, your friends, or 
more specific topics such as your work history. Take some time with this 
step; this information is really where your Web page stands or falls in 
terms of being interesting to other people. 

Unlike in other entry-level Web publishing services, HTML tags do not work 
within 1-2-3 Publish. You can't use HTML tags to format your Web page. 

6. Add links to your page. 

Enter the title of the links section, and then the name and URL of three 
links that you want to put in your Web page. Your favorite links are like 
your gift to the Web community, giving people who share your interests 
quick access to the most valuable resources you've found. Enter Web 
pages that you like and use a lot and that other people may not already 
be familiar with. Also, choose links that relate to the text you entered. 
(You can add to this list later, using other tools.) 

7. Click the Preview My Page button. 

Your Web page appears! It has a special box at the top that allows you to 
go back and change the page (by clicking Modify) or save it to the Web 
(by clicking Save). Figure 4-4 shows the very simple Web page one of the 
authors created as an example. 

8. Continue to modify and preview your page until it's ready, and then 
choose Save. 

Your Web page now is published on the Web! You see a Your Page Is 
Ready page, as shown in Figure 4-5, and the Web address of your new 
page. Write it down or save it in a safe place, and tell your friends! 

You can also make other changes, such as moving your Web page to a 
different area within AOL's home page categories. Click around on the 
Your Page Is Ready page and investigate the different options. 
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Figure 4-4: 

Bud's 
sample 
1-2-3 
Publish 
Web page. 
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■welcome 
to my page 

About Bud Smith 



Intro to Bud's Work 

My books include: 

- Creating Web Pages For Dummies. 7th Edition 

- Creating Web Graphics For Dummies 

- Internet Marketing For Dummies 
and morel 
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Figure 4-5: 

AOL gives 
you your 
URL and 
offers ways 
to change 
your page. 
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You can also: 

■ Change your page at any time by clicking on Edit at the top 
or any Hometown page 

■ Create new pages in AOL Hometown and link them together 
lo give others a better idea abotrt your interests 

■ Acid your own pictures, sounds, and other files to your 
home page using the File Hanacter . 



In the Spotlight 
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game? 
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daughters and why they are so 
special 
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To be able to see your Web page quickly, click the link for your home page to 
make it appear in a Web browser window. Then click the Favorites icon at the 
^tol fifit^e AOL screen. Choose Add Top Window to Favorite Places, and you 
l > _yr\^? ys re t urn to your Web page again from within AOL. 

After you take your page as far as you can with 1-2-3 Publish — which may 
take a while because the tool is pretty capable — you can move up to Easy 
Designer. Easy Designer allows you much more flexibility in the content and 
layout of your Web page, with drag-and-drop editing and placement of text 
and graphics. 

Just use the steps at the beginning of this chapter to choose a tool, but 
choose Easy Designer instead of 1-2-3 Publish. You can choose the Web page 
you developed with 1-2-3 Publish as your starting point for work in Easy 
Designer. 



After you edit a page in Easy Designer, you can no longer edit it further in 1-2- 
3 Publish. So be sure you take your Web page as far as you want to in 1-2-3 
Publish before editing it with Easy Designer. 
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The 5 th Wave By Rich Tennant 




"Try putting a person in the photo vrith the 
product you're trying to sell. We generated 
a lot o£ interest in our e^ay Listing once Leo 
started modeling nvy hats and scarves/ 
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In this part . . . 

M M se single-purpose tools to help your page flicker to 
\r% life — or to sell your stuff, and then tell everyone 
about it on a blog. Move your entire existence to the Web! 
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a Photo Page with Flickr 



In This Chapter 

Great things about Flickr 
Flaws in Flickr 
Uploading a photo 
Modifying photos 
Flickr futures 



JL/hoto sharing is one of the greatest uses of the Web. Flickr is the most pop- 
V ular photo-sharing Web site around, largely because it's so easy to use. 
"A picture is worth a thousand words," the old saying goes, and the right pic- 
ture can convey information or evoke feelings in a way that may take many 
thousands of words to accomplish. 

But photos have a mixed track record on the Web. Scanning in a printed 
photo was a hassle. But an even bigger problem was that photos tended to be 
big (many megabytes in size), and therefore slow to upload to a site and slow 
to download when someone wanted to see a Web page with a photo. (See 
Chapter 12 for more.) 

But now most of those problems are getting solved by the steady march of 
technology. More and more people have mobile phones that take pictures 
and digital cameras. These pictures don't need to be scanned in — and 
they're automatically compressed, using the JPEG standard, to about 100KB 
or so. A 100KB photo is just a tenth of a megabyte in size, and is therefore 
much quicker to upload and download. 

The other technological advance is the increasing number of people who 
have broadband Web access. Broadband is a catchall name for all sorts of 
faster access, usually at least 1 megabyte per second. At this speed, you can 
get ten typical JPEG photos uploaded to your Web site — or downloaded to 
your screen — in a second. Suddenly, adding a reasonable number of photos 
to your site doesn't slow it to a crawl. 
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The problems of getting photos onto your site and of viewing photos on the 
Web are steadily getting easier, but easier doesn't mean truly easy. 



easy, someone has to come along and wrap the technology in a shell 
that just about anyone can handle — even For Dummies authors like our- 
selves. This happened with the Model T Ford for cars, the Brownie camera 
for film photography, and the Apple Macintosh for personal computers. Now, 
Flickr has done it for online photos. 



What's Great About Flickr 

Flickr is great because it's all about photos — and about making photos easy 
to use online. The home page of Flickr is shown in Figure 5-1. 

The constant surge of camera phones and digital cameras has created a 
problem — many photos don't get printed anymore. That's right: The photo 
gets taken, maybe shown to a couple of people onscreen, maybe e-mailed to 
a friend or two, and then forgotten in a folder somewhere. 



'3 Welcome to Flickr - Photo Sharing - Microsoft Internet E: 



Figure 5-1: 

Flick your 
photos onto 
Flickr. 
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Even the few photos that do get printed have all the limitations of any physi- 
cal object: They cost money to create, can only be in one place at a time, and 
e stored somewhere or thrown away. All of those limitations can 
a burden on your wallet and on the environment. 



Enter Flickr, which bills itself as "the best way to store, search, sort and share 
your photos." (Try saying that three times fast; you'll end up saying "search- 
ing, shorting, and sharing.") 



Flickr forward 

As a visitor to Flickr, you can have an awful lot of fun. You can search through 
photos in a bunch of different ways, from the sensible to the quirky. 

But you get the most out of Flickr by using it to store and show off your own 
photos. When you try this, you find out the really great things Flickr lets you do: 

V Storing your photos: You can create a free account that holds hundreds 
of photos. With a free account, you can upload 20MB of photos a month, 
or about 100 reasonably sized JPEG images. The number of photos is 
also limited — to 200. Or upgrade to a Pro account and store thousands. 

You can simply store all your photos online, at least up to a point. Or 
you can just store the interesting ones and keep the rest on your PC — 
or take the opportunity to send them to the great bit box in the sky. 

v 0 Sharing your photos: People can visit Flickr and see your photos — 
under your control! You can keep private photos confined to a small 
group of viewers, whereas others can be seen by anyone who visits 
Flickr. 

j*" Sorting your photos: As your "photobase" grows, you can sort and orga- 
nize your photos in many ways, making them more interesting and con- 
venient to access for your own use and for others. 

Searching through photos: Labeling and organizing your photos well 
makes it very easy for you to find just the ones you want — and for 
others to find the photos you want to share with them as well. 

All these uses for Flickr are covered in this chapter. We show you how to get 
the most out of Flickr and your photos. 

In addition to doing these basic things, you can also get involved with the 
Flickr user community. There are special things you can do with photos on 
Flickr that you can't do other places. You can 
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Add notes to a photo: For instance, you can name everyone in that pic- 
ture from the office party. 

tags to a photo: Make it easy for people to find your picture among 
rs like it. For instance, by adding the tag "Golden Gate bridge" to 
your photo, you can make it easy for people to find your photo among 
all those of the famous San Francisco landmark. 



Put a photo in a pool: Pools of photos are photos linked in some way; if 
you see an open pool that's relevant, you can dive right in and add your 
photo to it! 

v 0 Engage in discussions about photos: You can share comments about 
photos on a message board — even highlight an area on a photo and 
mark it up with a message. (Yes, you'll see lots of immature "kiss me, 
you fool"-type messages if you look around.) 

Publish photos to a blog or your Web site: You can put pictures hosted 
on Flickr in your blog or other Web site. You can even see recent Flickr 
uploads on your mobile phone. 




We don't describe these additional features of Flickr in much detail here — 
after you dive in to Flickr, you can easily (perhaps too easily) spend all your 
time there. We don't want to be seen encouraging you to do too much, or 
your boss, spouse, kids, and so on, might blame us when you disappear into 
Flickr for days on end. 

Despite all Flickr does for you, you may want to master one capability for 
processing images before you upload them: making smaller versions of your 
photos. Many digital camera images are very large, say 1024 x 768, and with 
millions of colors, resulting in a multi-megabyte image. This is way more than 
you need for most purposes (except ordering prints), and means you'll use 
up your 20 MB monthly allotment very quickly. (Mobile phone camera images 
tend to be much smaller.) 

Flickr resizes photos during uploading, but you may want to control the 
process by doing it yourself. 

So to spare yourself trouble, find an image manipulation program that you 
can use to make images smaller. One very good, very cheap program is PC 
Paintbrush. You can download a free trial version from sites such as CNET's 
Download.com (www . download . com), and then pay a relatively small fee — 
usually less than $100 — if you like it and want to keep using it. Or, look to 
see if an image manipulation program was provided with your digital camera. 
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thing is perfect in Flickr land. Here are a few flies in Flickr's oint- 
you should be aware of going in: 



Too adult? For some potential users, Flickr may have too many grown- 
up images. Despite strict rules forbidding "frontal nudity, genitalia, and 
intimate moments" in Flickr photos, it's not hard to find nudity and semi- 
nudity on the site. If you post family photos on Flickr for your children 
to view, they may keep looking on the site and find some things you'd 
rather they not see. 

Flickr's terms of service limit users to those 13 or older, but there's no 
way for anyone to enforce it — probably, few users know it. So it's up to 
you to decide who you want to encourage to use Flickr. 

is* Too easy? Flickr makes it very easy to upload huge numbers of not-very- 
interesting photos. (Is every picture you take with your mobile phone 
worth sharing with the world?) You have to exercise considerable 
restraint to make sure all your photos are worth the server space 
devoted to storing them. 

«* Too open? Flickr has excellent privacy protections, but it's still easier to 
do the lazy thing and make all your photos public — or for passwords to 
be shared more widely than you planned. Someone putting Tom Cruise's 
head on your body might be funny — but there are enough weirdos out 
there that you may want to think twice before letting photos of, say, 
your kids be too widely viewed. 

V 0 Too flexible? Professional photographers are always careful to get a 
signed model release from everyone depicted in a photograph they want 
to sell or otherwise use. You don't necessarily need to be that careful — 
but the jury's still out on exactly what the limits are. Be careful, espe- 
cially about using photos without rights in any way that may help you 
make money (for instance, on a business's Web site). 

V Too good? Flickr is so good that it's now been acquired by Yahoo! In the 
months ahead, you'll need a Yahoo! ID to open a new account, just as 
with GeoCities (see Chapter 2). The changes that Yahoo! makes may end 
up improving it — or not, depending on your point of view. 

Think over these concerns before you commit a bunch of time and energy to 
Flickr. You may prefer to put your photos online some other way. Or, use Flickr 
to host your photos, but put the best of them on your own site for viewing. No 
matter what, you have many more options with Flickr than without. 
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If you share a computer with others, you may not have as much privacy as 
you think. The History function of your browser can make it easy for others 
ib pages you've visited, and photos get cached in ways that a lot of 
1-year-olds can figure out. So be very careful if you think you can use 
"private" areas on Flickr to upload and view some photos, and then let others 
use your computer and only see the public areas. They may see more than 
you intend for them to. 



Upioadinq a Photo to Flickr 

Here's a quick guide to getting a photo onto Flickr. It's amazing how 
confidence-building it can be just to do something simple once. 

1. Get a JPEG photo onto your system. 

Get a JPEG photo onto your computer system. The easiest way is to 
upload or e-mail a photo to yourself from your mobile phone. Or, copy 
pictures from a digital camera. Find a photo on your hard disk. (Choose 
StartOSearchOFor files or folders, and then choose Pictures, Music, or 
Video.) Or copy a photo from the Web — use a search engine to find 
images that are free for use. 

2. Open your Web browser. 

As is the case with more and more Web sites, Flickr can be used with 
any kind of PC or even a mobile phone. But for getting started, it's best 
to have a PC with fast Web access to use and upload photos to Flickr. 

3. Gotowww.flickr.com. 

A screen like the one shown earlier in Figure 5-1 appears, although the 
screen may change to reflect new quotes, different sponsorships, or 
increased influence from Yahoo!, Flickr's new owner. 

4. Sign in. 

If you're already a Yahoo! or Flickr member, click the Sign In link on the 
home page and use your ID to sign in. If not, click Sign up! and create an 
ID. (See Chapter 2 for details on how to get a Yahoo! ID; otherwise, we'll 
avoid detailing the process here because it's likely to change as Yahoo! 
integrates Flickr more.) 

After you're signed in, an opening screen like the one in Figure 5-2 
appears. Resist the temptation to explore — it's time to get something 
done. 
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Figure 5-2: 

Flickr invites 
you to 
upload a 
photo — or 
look around. 
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OK. You're all set, budsmith8. 



Some pointers to get you stalled... 

• upload vour first photo 

The best place to get started' 

• Read the Community Guidelines 

Find out what It means to be a member of Flickr. 

• Explore Flickr 

There are so many photos around here It's tricky to 
know where to start, so why not just explore? 
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These are some recent interesting photos posted to 
Flickr. 3ee more ? 
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5. Click the link Upload vour first photo . 

The Upload Photos page appears. 

6. Click the Browse button. 

The Choose File dialog box appears over the Upload Photos page, as 
shown in Figure 5-3. Note that you can easily specify up to six photos at 
a time. 

7. Use the Choose File dialog box to locate an image — or several 
images. 

Find an image on your PC to upload to Flickr. Repeat to upload multiple 
images. 




You can avoid the step of copying files to your PC if you can attach your 
mobile phone or camera to your computer. Just use the Choose File 
dialog box to find the mobile phone or camera as an attached device, 
and then copy the files directly from there. 
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Figure 5-3: 

It's easy to 
upload a 
few photos 
at a time 
from your 
hard disk. 
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Make sure not to upload an image if you think anyone in the picture may 
not want their face plastered on the Web. 

8. Add one or more tags to describe the image(s). 

Add descriptive words, called tags, to describe your pictures. Using tags 
in a way that makes sense to you, and that fits the way others use tags 
on Flickr, is a bit of an art — for now, just pick a descriptive word or two. 
You can always edit tags later. 

9. Choose privacy settings. 

There are five possible privacy settings in Flickr: 

• Public: Everyone can see your photos. Click the Public radio 
button to choose this setting. 

• Private: Visible to you only. To get this setting, click the Private 
radio button, and then leave unchecked the Visible to Friends and 
the Visible to Family check boxes. 

• Private: Visible to Friends. Click the Private radio button, and then 
check the Visible to Friends check box. Clear the Visible to Family 
check box. 

• Private: Visible to Family. Click the Private radio button, and then 
check the Visible to Family check box. Clear the Visible to Friends 
check box. 
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• Private: Visible to Friends and Family. Click the Private radio 
button, and then check the Visible to Friends check box and the 
Visible to Family check box. 




specify friends and family by adding them to lists. (Yes, you can add 
one person to both lists to give them an "all access" pass.) When the 
person signs in, they get the access you've specified. 

The Private setting visible to you only — which you achieve by choosing 
the Private radio button and clearing both the Visible to Friends and 
Visible to Family check boxes — is a bit hidden, but very useful. You can 
use this setting to store all your photos on Flickr, and then only "pub- 
lish" selected photos to others by changing their privacy settings. 

10. Upload your photos. 

Click the Upload button; your photos are uploaded, and Flickr creates 
various preview and thumbnail versions for use in various places. The 
Describe Your Photos screen appears. 

11. Add titles, descriptions, and tags to your photos. 

Now's the time! It's easy to skip this step, but if you don't do this now, you 
may never get around to it — and you may have difficulty finding some of 
your precious photos again. A typical result is shown in Figure 5-4. 



3 Flickr: Upload photos - Microsoft Internet Explo 
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Figure 5-4: 

Now it's 
time to title, 
describe, 
and tag your 
photos. 
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took over (by shedding on it). 
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Ti " e: |Oriana go-go boots 
_^ " Description: |Here's Ghana looking classy in go-go boots in our sitting __] ^_j 
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12. Save your photos. 

Finally, you're on Flickr! Figure 5-5 shows the first set of photos one of 
authors (Bud Smith) uploaded. Note that the middle picture is side- 
's — we fix that in the next section. 



Figure 5-5: 

Three's a 
lucky 
number. 
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Modifying Photos on Flickr 

One of the great things about Flickr is that the people who created it have 
thought through the whole process. They don't make you fix a photo before 
you upload it, or figure out every detail of a description the first time — you 
can change most things after you upload a picture. 

Here's a quick checklist of things you can easily change after you upload a 
picture — avoiding, for now, some of the more advanced sharing features of 
Flickr: 
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I Add note: You can annotate a picture with a note in a specific location. 

■-^ if Order prints: You can buy copies of your photos — this works better on 

J Y C\ C\ C\ L^pQtos with relatively high-resolution (1024 x 768 or larger), thousands 

' ' VlMiillions of colors, and taken with a steady hand (not blurry). 

v 0 Rotate: My favorite! I like to take pictures at different angles, and Rotate 
saves me time because I don't have to fix the rotation until after I upload 
them. 

Change privacy settings: It's easy to change who can see a picture. 

v* Change the title, description, and tags: Easy to do, and redo, and redo — 
but hard to get around to if you've uploaded a bunch of pictures without 
giving them meaningful titles, descriptions, or tags. 

V Flag as "may offend": We're sure that our wonderful readers would 
never upload a racy image — but in case you do, here's your chance to 
keep it from vulnerable eyes. Just flag the photo as "may offend" and 
you keep it from being found on a normal search. 

Follow the instructions below to make the preceding changes, or even more, 
in a photo: 



1. Click on a photo you've uploaded to Flickr. 

Find any photo you've uploaded and click on it. You are taken to an edit- 
ing screen for the photo. 

2. Click on the button you want to apply to the photo. 

You can apply all sorts of changes or actions to the photo (see the pre- 
ceding list). For example, f you click the Rotate button, a small window 
appears to preview the rotate operation. 

3. Finish the action you've chosen. 

Depending on what you've chosen to do — add a note, order prints, and 
so on — you'll be prompted to take one or more steps to finish the 
action. Figure 5-6 shows how the screen looks after choosing Rotate for 
a specific picture, and then Turn Left; the preview window shows the 
rotated photo. 

4. Click OK to complete the action. 

The screen reappears with the update you've chosen. 
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Figure 5-6: 

You can 
make your 
photos 
better and 
more 
interesting. 
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Done 



5. Add comments. 

Comments make photos more interesting — and you can use basic 
HTML to format them, as shown in Figure 5-7. See the Cheat Sheet at the 
front of this book for some basic commands, or go to Chapter 8 for more 
information. A list of tags is shown here: 

b. Traditional formatting is <b> to start bold text and </b> to end 
bold. 

i. Traditional formatting is <i> to start italicized text and </i> to 
end italic. 

blockquote. Marking out text with <blockquote> before and 
</blockquote> after keeps its original formatting and line 
breaks. 

a => href, target. You can use traditional HTML formatting, 
<a="www. flickr . com" >. Give a link from the picture to aWeb 
address. 
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Figure 5-7: 

Comments 
make 
pictures 
richer. 



1=1 



a * n * t> 



r.y.'mu: flick. com/photosj53704ffi^N0()|lij5071 i;5j , ?totated.ias:b.ll5()05S5S7799 



Here's Oriana looking classy in go-go boots in our sitting room. 

Preview vour comment 

This photo was taken last Christmas and shows off matching puslimma •- a gift 
from around that time - and hoots Also, my cool briefcase Vrtal I'm still (overusing. 

Change it? 



This photo was taken last Christmas and shows off matching 
<b>pashmina</b> - a gift from around that time - and 
«b»boots</b>. Also, my cool <i»briefcase<i> that I'm still (over) 
using 



"3 



PREVIEW Km POST COMMENT 



ft Offlj n tend* fa l*inily He Uw <w\ 

:■ 1 atVer. B) June 11 . 2G0e lediti 

9n diTtetent sixes 
B Viewer! A time* i Mol irtcludmij yni 1 1 

■ Etittiiiie tMrfplfen. wiing* 



F4{i IN* ph<Ao *c "may offend" 







mm 

I «• 



73 H.Go [Links 



d 



Taking Flickr Farther 

You can do much more with Flickr. Getting experience with uploading, modi- 
fying, commenting on, and tagging photos prepares you to do much more. 

You can organize your photos using Organizr, Flickr's photo file management 
system. You can change access permission, dates, and tags. You can create 
sets and modify your Photostream, the log of recently updated photos. 

As you do more with photos, even your view of Flickr's home page changes to 
reflect your work. 

And, Flickr can, all by itself, become a major preoccupation. For example, you 
can find popular tags on Flickr and set yourself the task of creating and 
adding new photos that extend your favorite tag sets. 

You can also use Flickr to host photos that you then publish onto your own 
Web site or blog, as described in previous chapters — so Flickr can be a 
resource for all your Web publishing. Enjoy! 
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Chapter 6 



ecoming a Wizard with Blogs 



In This Chapter 

Visiting the wonderful world of blogs 

Creating a Blogger site 

Adding content to your Blogger site 



ZM blog — the name is short for Web log — is a wonderful thing; an online 
¥ \ journal of a person's thoughts, experiences, and interests. Kept up-to- 
date, a blog can help visitors move with the writer through space — well, 
Web space, anyway — and time. 

In a sense, any site can be used as a blog. Just create a new page on your site and 
write your thoughts for the day. Include links to any site that you visited and 
want to share with others. Be sure to link to any blog that you find interesting. 

Then, a day or two later, add another chunk of text — put the new content on 
top, pushing your previous work down the page a bit. In your new content, 
refer to your earlier posting wherever necessary — and, of course, refer to 
other Web sites and blogs you visit. 

Over time, your burgeoning blog may develop into an appealing take on your 
life and interests — or preoccupations — or even obsessions. You may find 
that your blog expands so that you need to split it up among multiple pages 
and change your links to fit. Your blog may even get linked to by other blog- 
gers (people who keep blogs) and begin to develop a following of its own. 
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Blogging is not just another tool for generating Web content. Even though it's 
relatively new, blogging has developed such a following that many people 
spend hours a day perusing others' blogs and commenting on them as they 
add to their own. There's even a special word for all this: the blogosphere, the 
world of blogs and commentary about blogs and blogging. 

Many blogs are focused on the Web itself or on technical matters relating to 
computers — different types of computers, different operating systems, and 
so on. But many of the most interesting are deeply personal. One blog that's a 
mix of the two is from the famous, or infamous, Dave Winer, a talented cre- 
ator and marketer of software who also happens to be a top-notch corn- 
plainer. You can find his blog at www . scripting . com, which is also a great 
site for blogging information and tools. 

Blogs have even had a big influence on politics. Remember Howard Dean, the 
former governor of Vermont who was the leading Democratic presidential can- 
didate in late 2003 and early 2004? His blog was one of the leading tools of his 
campaign. Through it, people felt they came to know him quickly and well — 
and wanted to join him in changing the world of politics. 

Both Dave Winer and Howard Dean are known for being, well, intense charac- 
ters — and other people who are into blogging can be very intense about it 
as well. They tend to talk a lot about blogging and about related topics such 
as content syndication, collaboration, and online communities. You'll run into 
this if you search around the Web for blogs and conversations about them 
(mostly found in other blogs, of course.) 

One site that is, essentially, a big blog — but doesn't shout too much about it — 
is our very own Netsurfer site (www . netsur f . com), created by one of the 
authors (Arthur Bebak). Netsurfer shows that people were using blogging on 
the Web before the term, or any special software, was invented. 

Netsurfer hosts a series of online magazines, or e-zines, each of which 
includes a brief description of interesting news and a link to a site for more 
information. It's updated constantly — and the results are sent to users via 
e-mail. Figure 6-1 shows a typical page from the Netsurfer site. 
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Figure 6-1: 

Netsurfer 
was 
blogging 
from the 
beginning. 
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US National Strategy to Secure Cyberspace Draft 

The "White House has released a draft of the National Strategy to Secure Cyberspace. This 
high-level strategy document was created with considerable input from non-federal 
organizations such as local governments, private companies, and universities and research 
institutions. This makes sense since much of the Net infrastructure resides in the hands of those 
entities and outside the direct control of the US government. The document itself is bland, 
mostly a call for common-sense security practices and closer cooperation between private 
industry and the government, including the inevitable desire to set up new US agencies to focus 
on the issue. A minor but telling nit: the font choice in the huge three-column PDF document 
makes it hard to read and no simple text or HTML copy is available. The Web site of the 
Critical Infrastructure Assurance Office (CIAO, baby) has many related links. 

White House: http . ; .- i ".--w '.■•lu: --1 r''"'i , "'-y ilv ' 
CIAO: http jfwww ciao gov/ 
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NASA has announced details of the next generation space telescope (NGST), to be called the ^ 



Finding bloqs to read 

To find some blogs yourself, you can simply do a Web search using blogs as the 
search word. You're likely to run into a lot of stories about blogs and some tech- 
nically oriented blogs before you find personal or otherwise interesting blogs. 

For instance, in a recent search about blogging, we quickly found a story on a 
sex-related blog that got a U.S. Senate aide in trouble, a Bill Gates speech about 
blogging, and some blogging software — but none of the quirky, interesting, if 
sometimes self-obsessed content that has made blogging a phenomenon. 

Here are some list sites that give you a quick peek at what other bloggers are 
doing: 

www.britblog . com: A blog listing with the top British blogs, as contrib- 
utors see them — it even includes invitations to in-person get-togethers. 

www . bloggersblog . com: If you don't like the sound of "blog," you 
really may not like the name of this site. But it's a very useful directory 
of hot blog topics. 

u* www. weblogs . com: Some blogs aren't updated much; this list shows 
only recently updated blogs. 
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his chapter we show you how to use Blogger, owned by Google, 
s one of the easiest and best blogging tools out there — but it's far 
from being the only tool in town to suit your blogging fancy. 

Be warned, we can't promise that you will ever want to stop blogging once 
you start. Blogging can be an art form, so if you want to know more about 
blogs and get your own blog started, here are several top blogging resources 
you should check out: 

www. sixapart . com/typepad: Home for the TypePad Web logging 
service. 

www. sixapart . com/movabletype: Movable Type is quite technical 
and quite powerful. 

V www. diaryland. com: Easy, easy, easy is Diaryland's claim to fame. 

W www . hometown . aol . com: AOL's Web logging service — free to all, even 
non-AOL members. 

i** www. live journal . com: LiveJournal and its users emphasize the 
community aspect of blogs. 




Committing to a blog 



A blog takes more commitmentthan a Web site. 
The reason is simple: The diary, or "log," aspect 
of a blog can be time-consuming. An ordinary 
Web site can still be interesting and useful if it's 
not updated for awhile. A blog, by contrast, is 
valuable precisely because itcontainsthe latest 
information on a given topic — whether the 
topic is software, politics, or the daily musings 
of a bored teenager. 

You'll see, as you search through various blogs, 
that many are started, gain an interesting slant 
or approach, start to gain regular visitors and 
fans — and are then abandoned. It's very frus- 
trating to start reading an interesting blog only to 
see postings slow down and then stop com- 
pletely. Bloggers burn out — and blog readers 



also burn out, from keeping up with so many 
blogs at once. Because bloggers feel compelled 
to keep up with other blogs as part of making 
their own blog worthwhile, bloggers can truly 
find themselves burning the candle at both ends. 

Anotherthingyou may notice is a lot of personal 
information in blogs. Many bloggers willingly 
sacrifice some degree of privacy to participate 
inthe blogosphere — but you may wantto think 
twice before following their lead. 

So if you're not sure a blog is what you wantto 
do, consider creating a regular Web site first. 
You can then put the skills you gain creating 
your initial Web site to good use in creating the 
world's greatest blog — when you're ready to 
put in the time to maintain it. 
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om, also known simply as Blogger, is the leading blogging site, with 
the most users and the widest name recognition. The site was acquired by 
Google in 2003 when Google bought Pyra Labs, the creators of Blogger. At the 
time it was acquired, Pyra Labs had just six employees — but more than a 
million registered users for its blogging-oriented Web sites. Now another lead- 
ing blogging site, Live Journal, claims over 10 million registered users! 

The great thing about Google acquiring Blogger is that it gives ordinary folks — 
that's you and me — some reassurance that the site will be around for the long 
term. Many Web sites have come and gone, and Blogger wasn't immune to 
those pressures. Google is a highly profitable Web business, so the chances are 
increased that Blogger will go on and on. 

As GeoCities does with free Web sites (see Chapter 2), Blogger makes you pay 
for your free blog by having advertising hosted on your page. It's a relatively 
small price to pay for a very good service. However, you may want to con- 
sider a paid service, such as WordPress (www. wordpress . org), if you want 
an ad-free site. 

All blogs that you set up through the setup process described here are hosted 
on blogspot . com and have a similar URL. If you want to have your site 
hosted elsewhere, use the advanced blog setup at www. blogger . com/ 
adv-create-blog . g. You will need details such as the FTP server to use for 
transferring content to your blog; get help from the site host if you need it. 



Setting up yom bloq 

Since its acquisition by the megalith Google, Blogger has obtained the 
resources to make blogging easier and faster without quickly pushing its 
users into paying for services. At this writing, Blogger has just updated its 
interface to make creating an initial blog even easier — a perfect fit with the 
purpose of this book. Follow these steps to get started: 

Go to www.blogger.com. 

The Blogger site appears, as shown in Figure 6-2. 

If you look around the Blogger Web site, you see links to BlogThis, a way 
to quickly comment on any Web page within your blog. 

Click the orange arrow to Create Your Blog now. 

The Create an Account page appears, as shown in Figure 6-3. Read care- 
fully; just about everything you enter is very important to your blogging 
happiness. 
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Figure 6-2: 

Blogger 
welcomes 
you. 
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Figure 6-3: 

Getting 
started with 
a Blogger 
account is 
easy. 
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Choose a user name 


budznewblog 


You will use this to sign 
in for future visits. 


Enter a password 




Must be at least 6 
characters long. 


Retype password 




Enter it again just to be 
sure. 


Display name 


Budz Blog 


The name used to sign 
your blog posts. 


Email address 


budsmith2001@aol.com 


We will never share 
your address with third 
parties without your 
permission. 


Acceptance of Terms 
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read and understand 
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3. Choose a user name. 

kYour proposed user name is your sign-on name for Blogger; only you will 
s^it. Because Blogger is so popular, it's quite likely that most of the con- 



' V^ment or funny user names that you may think of, such as "budsmith" 
or "blogguy" are already taken. Choose something you'll find easy to 
remember, but be ready to enter a second choice if your first choice is 
already taken. 

4. Enter your password, and then retype your password. 

Unlike your user name, you can enter any password you like — it doesn't 
matter if someone else has the same one. Just make sure your password 
is both easy for you to remember and hard for someone else to guess. 

It may seem like your password is pretty unimportant because your blog 
is going to be immediately posted on the Web anyway. This is true, but 
that's not the point. The point is that if someone guesses your user 
name and password, he can post on your blog, and people will think the 
postings are from you — which could get pretty embarrassing! 

5. Enter your display name. 

You may be tempted to enter your full name here, but with the increasing 
power of the Internet, it's quite likely that someone who has your full name 
can find your address, phone number, e-mail address, and so on. Consider 
using a display name that doesn't give away your complete real name. 

Be careful with putting personal information on the Web; identity theft 
is becoming a larger and larger problem, and you don't want to make it 
easy for the fraudsters by giving them a good start on a detailed profile 
of you. 

Think a bit about your display name; if your blog might cover personal or 
serious topics, for instance, don't choose a really silly one. (A posting 
from "wild&crazyguy" about your upcoming hospitalization, for instance, 
may be a bit disconcerting to your blog visitors.) You may also want your 
display name to relate in some way to your blog title and blog address; 
see Steps 9 and 10 for details. 

6. Enter your e-mail address. 

Blogger — and Google, the site's owner — promise not to share your 
e-mail address with third parties without your permission. That's good, 
but remember that the marketing folks at Blogger and Google may find 
an awful lot of reasons to e-mail you themselves! 

7. Click the Terms of Service link. 

Before you click to put a check mark (indicating that you agree with 
Blogger's terms), click the Terms of Service link to make sure that you 
actually do agree. 
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The Terms of Service appear in a new window, so don't worry about 
losing the data you've already entered. 



should always inspect the terms of service for a Web site if you're 
g to enter personal information on it, such as your e-mail address. 
This is especially true with a blogging site because, by nature, blogs 
require you to put so much data into the service, some of which may be 
personal. (Some blogs are embarrassingly personal!) Blogger's owner, 
Google, as a public company, may be more trustworthy than most — but 
you should still see what you're getting into. 

Courts take Terms of Service seriously — after you agree to them, you're 
bound by them, whether you've read them or not. Some unscrupulous 
companies have gotten away with some pretty shady scams this way — 
and even big, respectable companies have used them to protect them- 
selves from angry users. So give the Terms of Service the once-over. 

8. Click the check box to accept the Terms of Service, and then click the 
Continue arrow. 

If you see a new screen called 2: Name Your Blog (see Figure 6-4), go to the 
next step. If you see the same screen as before, with an error message, do 
the following: 

The error message is most likely to be a caution sign and a warn- 
ing: "Sorry, this username is not available." If so, enter a new user 
name and reenter your password in both blank areas below it. 
Then click the Continue arrow. 

After your user name is accepted, the Name Your Blog screen 
appears. 

9. In the Name Your Blog screen, enter the title for your blog. 

You can give your blog any title you want, but give your decision some 
thought. Ideally, the title should be rare or even unique; should sum up 
what's different and special about your blog; and should relate to the 
blog address you'll give it in the next step, which also needs to be 
unique. 

For instance, if you're creating a blog in support of a book about creating 
Web pages, you might call it Creating Web Pages Web Log. 
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10. Enter the blog address, the first part of the URL for your blog. Then 
enter the word you see onscreen in the Word Verification section. 

Enter the first part of the blog address for your blog. This portion of the 
address is used by Blogger to form the first part of your URL for your 
blog. For instance, if you enter caveboy4 in the blog address spot, your 
URL is caveboy4 . blogspot . com. 

As with your user name, your Blog address must be unique — if some- 
one else has it already, you won't get it. Believe us — most of the good 
addresses are taken! So think carefully about a display name (see Step 
5), blog title, and blog address that work together and are unique 
enough to pass muster. 

After you enter your blog address, you must also enter the word you see 
displayed. This is done to verify that you're a human (who can make out 
the letters displayed) and not a script automatically creating a Web site 
(which can't "read" such graphical lettering). 
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Google can help you find interesting blogs on Blogger.com — or other 
interesting content on other interesting sites. If you search for 

e : blogspot . com caveboy, for instance, you're likely to find most 
e blogs on Blogger.com that have "caveboy" in their content some- 
where. (We say "most of" because Google doesn't index sites instantly, 
so you may not be able to find something that's moved recently or that 
has otherwise escaped Google's attentions.) 

11. Click the Continue arrow. 

If you see a new screen called 3: Choose a Template (see Figure 6-5), go 
to the next step. If you see the same screen as before, with an error mes- 
sage, do the following: 

The error message is most likely to be a caution sign and a warning: 
"Sorry, this blog address is not available." If so, enter a new blog 
address. Then click the Continue arrow. When your blog address is 
accepted, you see the Choose a Template screen. 
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12. Choose a template. 
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You'll see a dozen or so templates to choose from — different looks for 
blog. Choose one that fits the way you want your site to appear, 
the image of any of the templates to see a larger preview appear in 
a pop-up window. 

It may be tempting to rush this part of the process — especially because 
Blogger allows you to change your template (by editing the page's HTML) 
or substitute a different template later, without losing any of your content. 

Before you click Continue in the next step, be sure to check all your 
choices; your blog is created instantly, you won't have a chance to 
review your choices first. 

When you've made your choice of template, think about whether 
you're happy with all the choices you've made so far. If you're happy, 
and ready to create your blog, click Continue. 

Your blog is created! 

Click the Start Posting button to open your blog so you can start 
adding content to it. When your blog appears, save the URL in your 
Favorites list. 

In Internet Explorer, click Ctrl+D to add the current page to your 
Favorites. 



Adding content to qom btoq 

Adding content to your blog is easy — but doing it just the way you want it 
can be hard. Not all the options you're used to having for text formatting in, 
say, a word processor, are available with the Blogger software. You have to 
experiment to find out what you can and can't do. 

From this point, your choices as to what to do, and what order to do it in, are 
nearly infinite. You may want to create posts right away; on the other hand, 
you may want to understand everything about your blog page before creating 
any content, let alone telling anyone how to find it. 

To accommodate all the different approaches you can take, the following sec- 
tions give highlights of each page you use to edit your blog. Read each sec- 
tion briefly — and then roll up your sleeves and go experiment. That's what 
Blogger is there for! 
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Posting and formatting 

Posting page (see Figure 6-6) is where you create the posts that appear 
ite. You can always edit, delete, or rearrange posts later, but it all 




If you leave and reenter Blogger, you may find yourself at the Dashboard. To 
reach the Posting page from the Dashboard, simply click the link to your 
page; then click the Create link. 

The Posting page allows you to enter plain text and format it using several 
options. You can use the easy, word processor-like buttons as shown in the 
figure, or use HTML directly 



Figure 6-6: 
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Creating Web Pages Web log 

Creating Web Pages For Dummies has been very, very good to us — and, we hope, to our 
hundreds of thousands of readers as well. 

The book is now in its Eighth Edition. In publishing terms, that's pretty remarkable; books are 
usually put out to pasture much earlier in their lives. 

During the life of the book, the services available to beginning Web publishers have changed, and 
improved overall: 
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GeoCities was once a standalone success story; now it's part of Yahoo! . 
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To use HTML directly, simply click the Edit HTML tab. Your content — and 
the formatting you've applied to it — is displayed in HTML format, as shown 
in Figure 6-7. 
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Here are a few simple options for using HTML in your text: 

Bold: Makes the text you select bold, as you would guess. You'll see the 
HTML tags <b> and </b> surround the text, indicating that the bold is 
beginning (<b>) and ending </b>). Don't overuse bold text because it 
looks like you're shouting. 

Italics: Also obvious — makes text italic. The HTML tags <i> and </i> 
surround the text to indicate the beginning and end of italicization. Don't 
overuse italic text because it makes the text harder to read onscreen. 
(Printed italic text is much easier to read than onscreen italic text.) 

Link: Here's where you link text to a Web address — a big part of the 
original purpose of blogging. To use this, highlight the text that you want 
to have linked, and then click the Globe-and-Chain icon. You'll have the 
opportunity to link the text. To delete the link, delete the linked text. 

Make the linked text short, but at the same time ensure that the user will 
be able to tell what they'll get when they click the link. It's extremely 
annoying to see a link called My Favorite Dummies Book , for instance, 
and click it only to find that the link is to the overall Dummies site, not a 
description of the specific book. 

You also have the option of spell-checking your content — a capability 
added since Google purchased Blogger, and for which those of us with 
bad spelling can be grateful. 
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Using other Blogger options 

In addition to posting — which, we hope, you'll spend the majority of your 
Blogger offers many other options. Highlights include 



i>* View Blog: This option simply pops up a new window with your blog in it. 
Don't simply use this option to view your site after you make changes — 
you may also want to use this option to see what's currently on your site 
as you're writing new posts. 

Settings: Settings allows you to change options in separate pages 
devoted to Basic, Publishing, Formatting, Comments, Archiving, Site 
Feed, E-mail, and Members options. (The E-mail option lets you post to 
your blog from an e-mail account.) Carefully check out and test these 
options; they support powerful capabilities such as posting to your blog 
by e-mail. 

V Template: Here's where you can see the HTML code for your template — 
and change it any way you'd like, for better or worse. It requires real 
HTML skill to navigate through and change the code so that it looks 
exactly as you want it to. 

Don't be afraid to ask someone for help if you know a skilled person. You 
can also choose a different preexisting template here, for which you 
won't need any special skill. 

Dashboard: This is the screen you see when you sign in to Blogger in 
the future. It's your starting point for managing your site. See Figure 6-8 
for an example of what the Dashboard looked like for a given user — OK, 
one of the authors — on a given day. 

Post photos: Blogger is not as photo-oriented as Flickr (see Chapter 5), 
but it's pretty good with photos. Click the photo button at any point to 
add a photo to your blog. 

f Post from your mobile: In the United States, you can post text or 
photos to your blog from your mobile phone. Just send a message to 
go@blogger . com from your phone. Blogger creates a blog entry with 
the text or photo you sent and send a code to your phone. Sign in to 
go .blogger . com and enter the code to work on your new blog. 
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You can do a great deal with your site — allow other people to add comments 
to it or not, change the look and function of it, and much more. Have fun with 
it — and keep posting to it every day or two. (You can even post photos to 
your blog from Flickr; see Chapter 5.) 

For much more information on how to get the most out of Blogger, go to 
Blogger Help at help . blogger . com or join the Blogger Help Group at 

groups . google . com/group/blogger-help. 

There are many options for including blogging capability in a full Web site, 
but one of the easiest is just to use Blogger for blogging, and then copy and 
paste the "best of your blog" onto your full Web site — on GeoCities (Chapter 
2), Google Page Creator (Chapter 3), or anywhere else. 

When you have your blog up and running, let people know! Let them add 
comments if you like. That way, your humble little blog can begin to be the 
center of a new online community — yours! 
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In This Chapter 

Getting to know eBay basics 
Selling fees 

Posting your first item 
Registering as a seller 
Experiencing sales success 



^jBay is a fantastic success. One of the best-known and most valuable com- 

panies on the Web, it has grown, over the years, from strength to 
strength. The number of buyers, sellers, and countries with eBay sites has 
grown sharply. eBay has even acquired "brick and mortar" businesses like 
auction houses. 

Yet many people resist eBay's lure. eBay users tend to fall into two cate- 
gories: a core of heavy eBay users and a penumbra of occasional users. Yet 
many millions never have used eBay — and perhaps never will. eBay is look- 
ing hard for ways to expand its influence even further. 

But as a place to start a career in Web publishing, eBay is wonderful. Creating 
a simple site to sell an item is very simple, and the joyful experience of actu- 
ally making money online encourages you to do much more on eBay — or to 
do anything else you want to do on the Web. 

In this chapter, we provide the briefest possible introduction to eBay, with 
the emphasis on the part that relates to the theme of this book, creating the 
product page, and to an easy, successful first selling experience. You can do 
much more on eBay than we present here, but our goal is to give you that ini- 
tial thrill of success as quickly and easily as possible. 
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The eBay publishing industry 



You"Toulirea~siiy miate an entire library with 
books about eBay. Here are some stars from 
Wiley Publishing, publishers of the For Dummies 
series: 

eBay For Dummies, 4th Edition: eBay For 
Dummies is the big dog in the eBay book 
kennel. A consistent bestseller, the author, 
Marsha Collier, has appeared on TV, radio, 
and in print, extolling the benefits of eBay and 
telling people how to get the most out of it. 

V Starting an eBay Business For Dummies, 
2nd Edition: Also by Marsha Collier, this 
book takes you further into how to not just 
buy, but sell successfully on eBay. It tells 



you how to get items to sell and provide 
excellent customer service — and how to 
keep track of all the money that comes 
rolling in! 

Developing eBay Business Tools For 
Dummies: John Kaufeld and Tim Harvey pro- 
vide you with ready to use tools that drop 
right onto your eBay selling page. They also 
show you how to create your own tools, if 
you're ready to learn a bit of programming. 

Check www.dummies.com for more — 
including four more eBay books from Marsha 
Collier! 



Reviewing the eBay-sics 

Get it? "eBasics"? Well, never mind . . . The home page of eBay can be found 
at www . ebay . com. It's shown in Figure 7-1, just to get you oriented if you 
haven't visited recently. 

Before you follow the instructions below and sell an item, here are five key 
things you should know about eBay: 

v 0 Reputation is key: When selling on eBay, you quickly get a reputation 
for your fair and effective treatment (or unfair and ineffective mistreat- 
ment) of buyers and their problems or complaints. Your customers have 
the opportunity to leave public feedback about how well (or how badly) 
you treated them. Although you have an opportunity to leave feedback 
on the buyers as well to tell your side of the story, overcoming a low 
feedback rating from multiple users is nearly impossible, so make every 
effort to treat people well. 

V Accuracy is important: You don't need to do much to get started on 
eBay, but on the limited effort you do make, get everything right. Spell- 
check your text and have a friend read it for correctness and complete- 
ness. (You may know that the golf clubs you're selling are left-handed, 
but buyers won't know unless you tell them.) 
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Ship happens: Whatever you sell has to be shipped. Consider limiting 
the area you sell in to those areas where shipping isn't too high a share 
e cost of the item itself. 



bw-through is critical: Your job isn't done when you sell and ship; 
you have to follow through. Make sure the item arrives in good shape 
and that the seller is happy with the product, the price they paid, and 
how you've treated them. Then ask them to post favorable feedback on 
the transaction. If not, offer a refund — and follow through on that too. 

i>* Fraud is an issue: Many fraudulent transactions have occurred on eBay: 
Some people steal buyers' identities and others pass off counterfeit 
goods or don't provide services they've sold. Keep your offering simple 
and credible. Consider not starting with any item whose authenticity 
could be disputed, such as an autographed football. 



Overall, the lesson for selling on eBay can be summarized in two common 
catchphrases: "take your time" and "KISS — Keep It Simple, Stupid." Not that 
you're stupid — but you can't afford for your buyers to think you are. 

The worst thing that can happen to you on eBay isn't that you fail to sell your 
item or fail to get a good price — it's that you get bad feedback and a bad 
seller rating in your first item. So manage your reputation for success and, 
over time, the money will take care of itself. 



3 eBay - New & used electronics, cars, apparel, collectibles, sporting goods B: more at low prices M 



FNe Edit View Favorites Tools Help 



Figure 7-1: 

Go home 
to eBay. 



Back - ^ - 



http://www.ebay, com/ 



home pay register site map 



Buy Sell My eBay Community Help 



jstart new search 



Advanced Search 



Hello! ^iqn in | register 



£U«) mam 

<3> Live Help _ 



you can get it on 



efc 



| Ail Categories 



■-] Search |a<)^ 



Specialty Sites 

eBay Express K** 
eBay Motors 
eBay Stores 
Live Auctions 
Reviews & Guides 
Want It Now 
eBay Business 



Categories 

Antiques 
Art 
Baby 
Books 




» _ » 

Summer Dollar Days 

BidtromJI *• 




Registei to BiO. buy and Saw 
If s FREE' fjgggJSm 



gjk Renijrc??: video Parses ^^^^ 



Find a great selection of dolls 
from Madeline to American 
Girl. Bid now! 



Shoe shopping made easy! 
For men and women, shop by 
style or by brand. 

Bid on the top sellinq books 



e , \tXy.hu- ~: ■ :-• : ■ - .:: f >:35a49B%^B(M>%3B0%3B10418078 o A3 



$ Internet 



Part II: Making a Specialized Page 



p! 



eBay selling fees 



by charging fees on your 
sales. At this writing, fees are 

i*** Insertion fee: You're charged to list an item. 
The charges range from 20 cents to $1.20 
for prices up to $50, and up to $4.80 for items 
priced at $500 and beyond. 

Final value fee: You pay eBay 5.25% on the 
first $25 you make. If you make up to $1,000, 
you pay 3% on the amount above $25. You 
pay 1.5% on anything you make over $1,000. 



For a $9.99 item, your insertion fee is 35 cents, 
and your final value fee is 53 cents — your total 
fees paid to eBay are a bit under a dollar. For a 
$19.99 item, your insertion fee is 60 cents, and 
your final value fee is $1.06, just under two dol- 
lars. That's under 10% total in each case. For 
more expensive items, the percentage of your 
sale going to fees drops rapidly. Check eBay for 
the latest fees and more details. 



Eventually, you may want to stop keeping it simple. That will be a good time to 
look into Developing eBay Business Tools For Dummies (Wiley, 2005). Authors 
John Kaufeld and Tim Harvey provide you with ready-to-use tools that drop 
right onto your eBay selling page to do things such as adding a form to your 
auction or allowing the user to quickly e-mail information about your auction 
to a friend. They also show you how to create your own tools, if you're ready 
to learn a bit of programming. 



Posting \lour First Item 

Posting your first item for sale on eBay is fun, but can also be nerve-wracking. 
Follow the steps below to keep it simple — and successful. 



Choose What to sett 

We've tried to convince you that it's not important to make a lot of money on 
your first eBay sale — but it's best not to lose money either. So the best thing 
to sell is something you already have and wouldn't mind getting rid of. 

You also want something that's easy to ship and relatively low-priced. So 
some items that fit your needs may include 

Books: Most of us have a few books we wouldn't mind getting rid of — if 
only to make room to buy more! It's good to sell a few books that share a 
theme or genre, such as books about programming, college textbooks, 
science fiction novels, and so on. So look through your bookshelves for 
a few books you can get rid of. 
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Don't charge much extra for a signed book; you can't prove the signature 
is real, so treat the signature as a fun extra, not the ticket to a million- 
,ar sale. 




DVDs, and so on: Just like books, you probably have a few cassette 
tapes, CDs, DVDs, and videotapes you can cheerfully live without. List a 
whole bunch of things — and don't worry, you won't be the first seller 
trying to move a complete collection of ABBA albums! 

Clothes: You probably have a few clothes you don't like as much as you 
used to, but some teenager somewhere can probably have fun with 
some of them. Used kids' and maternity clothes almost certainly have 
some life left in them, so consider getting rid of extra items of clothing 
or shoes. (But make sure you represent the item's condition fairly and 
accurately: No sense having a disappointed first customer.) 

f* Jewelry: Not the fancy stuff — expensive jewelry can be difficult and 
risky to ship and risks buyer suspicion (as to whether it's genuine) and 
disappointment (if it's not exactly what the buyer — or the recipient of 
the jewelry as a gift — imagined). But inexpensive jewelry can be fun to 
sell and fun to buy — and, as with books, selling it off may just make 
room for more. 



Books, our first suggestion here, are hugely popular on eBay. Figure 7-2 shows 
the Books categories page just to give you an initial idea of how popular the 
Books area is — and remember, most of the categories shown have many sub- 
categories as well! 
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Figure 7-2: 
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As you choose an item, or a few items, to sell, consider what selling price you'll 
accept, and whether you're ready to ship the item. (After you complete a sale, 
,nt to move fast.) Think low on the selling price — initial success, and 
tomer happiness, opens the door for you to do more later if you 
want, and gives you the starting point to make much more money. 



Register as a setter With eBay 

Here's a quick trip through registration as a seller. This includes registering 
as an eBay user, if you haven't already. 

Follow these steps: 

1. Go to the eBay home page and click on the Sell tab. 

The eBay selling page appears. 

2. Click the Sell Your Item button. 

The Sign In page for selling your item appears, as shown in Figure 7-3. 



Figure 7-3: 

eBay wants 
to make 
selling easy. 
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New to eBay? or Alieady an eBay user? 



Help 



If you want to sign in. you'll 
need to register first. 

Registration is fast and fiee 

Register v | 



New to selliinj? Make sure you do the following: 
. Learn how to sell Reyiewthe seller's checklist 

Learn about selling fees 

Emei youi User ID and password to start selling. 
eBay User ID 

I 

Forgot your User ID' 
Password 
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3. If you aren't already registered, click on the Register button. 

The page Register: Enter Information appears, as shown in Figure 7-4. Fill 
e form with relevant information. Be careful to be accurate — real 
ey should be changing hands soon! 

You must check all the boxes to continue, including the one allowing 
eBay to contact you. It's unusual for this check box to be required, con- 
sidering strict data privacy laws in Europe and elsewhere, but this is one 
case where it is. 

eBay has a User Agreement and Privacy Policy that you see only if you 
click on the Here link near the bottom of a long form. It's worth doing 
so — if you proceed to sell or buy on eBay, the terms could be important 
to you. And if you're under 18, don't sign up — it's against eBay's rules 
and could lead to real problems for you later. 

4. After you've filled in the form completely, click Continue. 

If you've left anything out, the form page reappears, and you'll be 
prompted to make corrections. When you're done, click Continue again. 



Figure 7-4: 

Give eBay 
your info to 
register. 
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Register: Enter Information 

1 Enter Infoimation 2. Check Your Email 
Register now to bid, buy, or sell on any eBay site worldwide It's easy and fiee. Already registered? Sign in now . 
<5> Live help - Chat online with a Customer Support representative. 



Help 



Your Personal Information - All fields are required 
Want to register as a business ? 

First name Last name 

[Bud 

Street address 

|1 7 Golem Road 



Smith 



(Apt 1 7 
City 



Your privacy is important 
to us 

eBay does not rent or sell 
your personal information 
to third parties without 
your consent, 

privacy policy. 



[London 
State / Province 



Your address will be used 
for shipping your purchaS( 
or receiving payment frorr 
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Country or Region 
[United States 
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eBay puts up a page telling you to check your e-mail. Go to your e-mail 
program, find the e-mail from eBay, and click on the link provided. 

e link doesn't work, copy and paste the Web address provided into a 
browser window. 



You'll see a page confirming your membership and prompting you to 
create a seller's account, as shown in Figure 7-5. 

Click the Create Seller's Account button. 

The Create Seller's Account credit card page appears. 

Enter your credit card or debit card information and press Enter. 

Enter your credit card or debit card information (don't put spaces in the 
card number) and click Continue. 

At this writing, eBay does not take American Express. 

After you press Continue, the Create Seller's Account bank account page 
appears. 

Consider using a credit card rather than a debit card for your seller's 
account and for eBay purchases. Credit card companies give you the 
ability to challenge disputed charges in a way that a debit card may not 
You really don't want to risk your eBay seller rating or buyer rating in a 
dispute, but it's good to know you have the option if you really need it. 



Figure 7-5: 

eBay wants 
you to sell 
as well 
as buy. 
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Sell Your Item: Create Seller's Account 

Congratulations ilummiesliu<lmau You are now leyisteted as a member of eBay. 

Your next step to start selling is to create a seller's account. 



To sell items on eBay, we ask all members to: 

• Enter a credit or debit card 

• Enter a current bank account details 

We t e mi est this infoimation because: 

• It helps to keep eBay a safe place to buy and sell 

• When you list items for sale, eBay charges fees , starting at 
15p 

This one-time process takes only a few minutes Your 
information is protected on eBay's secure servers and by our 
Privacy Policy . 
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Create Seller'sAccount> 
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8. Enter your bank account information and click Continue. 

eBay requires your bank account information as one way to debit your 
r's fees directly from your account. 




Enter your bank account information (don't put spaces in the card 
number) and click Continue. 

After you click Continue, the Create Seller's Account pay selling fees 
page appears. 

If you made any errors on your credit card information page, you'll be 
alerted to them now. You'll have to repeat Steps 8 and 9. 

9. Select how to pay your selling fees and click Continue to complete the 
seller's registration process. 

After you click Continue, the Sell Your Item: Choose a Selling Format 
page appears, as shown in Figure 7-6. 

The steps so far only qualify you to sell at auction — which is the most inter- 
esting and fun way to sell on eBay. You must successfully sell several items at 
auction, achieving a high feedback score, before you qualify to sell at a fixed 
price. 



Figure 7-6: 

Congratulati 
ons! You're 
an eBay 
seller. 
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Sell Your Item: Choose a Selling Format 



^Congratulations, dummiesbudman Y0111 seller's account has heen created ami you are ready to sell. 



You qualify to list yotn item in an Auction. Auctions only allow bidding on your item. 
Please make sure your item is allowed on eBay first. 

tS Sell at online Auction 

Allows bidding on your items Learn more 

Sell at a Fixed | "Buy It Now"! Price 

Sell your items instantly at a Fixed Price using Buy it Now 
.: how to qualify lor Fixed Price item;. 

Want someone else to sell for you? Find a Trading Assistant . 
Continue > 



New Sellers, before you sell... 



• Learn how to sell 

• Review the seller's checklist 

• Learn about selling fees 
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Post the item 



re going to race through posting your item for sale, so you can more 
get the buzz of a successful sale. Follow these steps: 



1. Click the Sell tab on any eBay page. 

The Sell page, shown in Figure 7-7, appears. 

2. Click the Start Selling with the New Version of the Sell Your Item For m 
link. 

If the only choice is the Sell Your Item button, click that instead. 
The Sell form appears, as shown in Figure 7-8. 

3. Enter the category of the item you're selling in the What Are You 
Selling? field. 

Enter the category of the books you're selling; for instance, I have a 
few Simon Schama British history books I'd like to move, so I entered 
History Books. 



Figure 7-7: 

Sell, sell, 
sell. 
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My eBay At A Glance 

£3 I have 3 new messages . 
Selling Remiinleis (last 31 days) 
There are currently no Selling 
Reminders to display 
-ah Mi/ e^ay. 



How do you sell on eBay? 



What's New 



Piepaie 

Decide what you 
want to sell Then 
find similar listings 
on eBay which will 
help you determine 
what to say and 



List 

Write a description 
and take a photo of 
your item which will 
help attract buyers. 
You are now ready 
to fill out the Sell 



Get Paid 

Once your 
listing is ended 
and complete, 
receive 
payment from 
your buyer. It's 



Need Assistance? 

Find a local Trading 
Assistant to sell 
your items. You'll 
save time and make 
money when you 
work with an 



eBay Tools Finder - 
More Listings, Less 
Time 



eBay Shops • open 
shop*.; e one today 
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Figure 7-8: 

Show good 
form in your 
selling 
efforts. 
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Browse for categories I 



Recently used categories 



Decide what to sell 



You can sell almost anything on eBay. To get started, 
consider selling something in your home or business 
that you no longer want or need. Chances are that 
someone is looking for it on eBay. 



My eB.iy At A Glance 

O I have 3 new m 



Selling Reminders (last 31 days) 
There are currently no Selling Reminders to 
display. 
See all in My eBay . 



Top buyei searches 




1-psp 

2. ipod 

3. xbox 360 

4. laptop 

5. ipod nano 
See more. 
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4. A list of categories appears on the Sell: Select a Category page. Click 
between Search for Categories, and then Browse for Categories, to 
make the best choice(s). Select one or two categories for your listing. 
(A second category costs a bit extra.) 

Choose your category carefully — eBay tries hard to make sure items 
are placed in the right category, and if a buyer thinks you've miscatego- 
rized an item, it could lead them to give you a poor seller's rating. 

After you choose a category, the Sell: Create Your Listing page appears. 

5. Use the Sell: Create Your Listing page (an example is shown in 
Figure 7-9) to create the complete listing for your item. (The details 
of the page change depending on the category you've chosen.) 

Take full advantage of the Help area on the right side of the page and 
the pop-up help that appears when you click a question mark. When 
you see the pop-up help, you're even given the option of customizing 
the form. 
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Figure 7-9: 

Create your 
eBay listing. 
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Sell: Create Your Listing 



Tell Imyeis about your item. 

• To get help: Click 

• To display more options and features 
Click the "Customise form" link. 



What you're selling 




Help Customise form 



Caterjoiy 

Books, Comics & Magazines > Non-Fiction Books > History > Great Britain > 
Other British History Books 
Change category 



Describe your item 



Help 



Creating Your Listing 

On this page you'll provide the 
description and pictures of 
your item 

You'll also choose how you want 
to sell the item, known as the 
selling formal. For example, 
you can let buyers bid in an 
auction-style listing or set a fixed 
price. 

You'll can review and enhance 
your listing on the next page after 
you click the Save and 
Continue button 

Related topics 

• Topic Index 
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An important text-only category is the Title. You only have 55 characters 
here, so choose your words carefully I entered "Simon Schama History 
of Britain complete 3-volume set," which used 53 of the 55 characters. 
I included "complete" so the buyer knows they aren't getting three vol- 
umes out of a larger set — the set only has three volumes. 

6. Click the Add Pictures button to upload a picture. The dialog box 
shown in Figure 7-10 appears. Click the Browse button to find the pic- 
ture^) you want; use the Enhanced tab to modify a picture. Click the 
Upload Pictures button to continue. 

eBay may install software to make uploading pictures easier. You have 
advanced options and even the ability to point to a picture on Flickr 
(see Chapter 5), or another site, instead of uploading. 

For now, to keep things cheap and easy, get a single picture of the 
item(s) uploaded to eBay. 

A picture is, indeed, worth a thousand words. Use a small, crisp picture 
to ensure that potential buyers can quickly get a good look at your 
item(s). 
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Figure 7-10: 

Upload a 
picture of 
your item(s). 
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7. In the Description area, enter a description of the item. 

Enter a detailed description of the items, using HTML to highlight key 
points and create bulleted lists — a key feature for someone scanning 
hundreds of listings looking to buy a birthday gift! 

An example, showing HTML codes, is shown in Figure 7-11. 

Click Save Draft to save your Description in progress. 

Use the Cheat Sheet at the beginning of this book to find some useful 
HTML tags to enter. 

If you click the Preview button, the whole page is previewed — and you 
have to reselect the category (or categories) to get back to the Create 
Your Listing page. 

8. Choose a Visitor Counter style, enter a starting price, choose a pay- 
ment method — PayPal is easiest — and specify a length of time to 
run the auction, plus postage costs and methods within your country. 

Finish the listing by filling in the remaining fields. To keep things simple — 
and increase your chance of making your buyer happy — only accept 
PayPal for payments, and only mail to destinations in your own country. 
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Figure 7-11: 

You can do 
an HTML of 
a good job 
on the 
Description. 
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<P>This is the <FOHT color=#ff0010>complete </FONT>3-volume 
hardbound set of Simon Schama's <FONT color=#fb0034>History 
of Bntain</FONT>, which also goes with the <A 
href="http://cgi5 ebay co.uk/ws/bbccouk">BBC senes</A> ofthe 
same name This is an excellent history offered at a much better price 
than you'll find elsewhere. </P> 
<P>Key points:</P> 
<TJL> 

<LI>BBC TV Se-in</U> 

<LI>Easy to follow</LT> 

<LI>Complete history right up to 2000 

<LI>Notjust kings and queens</LI></UL> 

<P>Why I'm selling: I read this senes in softcover, and would now 

like to see these books go to agood home </P> 
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Description 

Describe your item 
comprehensively to inform 
buyers, build trust, and answer 
any questions The more detail, 
the better 

• Tip* 

Include the following details: 



Done 



Item features: List all the 
benefits, specifications, 
and parts included. 
Item condition: Is the 
item new, used, or still 
under warranty? Note any 
flaws or repairs. 
Answers to common 
questions: What material 
is the item made of? 
When was it made? What 
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If you don't choose a Visitor Counter style, you won't have a counter — 
and it's an awfully nice thing to have. 

9. Click the Save and Continue button. 

Your page is saved, and the Sell page for promoting your listing appears. 

Click the Edit Listing button at the top of the page to go back to your list- 
ing, update it, and preview it. Make sure it's accurate, spell-checked, and 
so on. 

Carefully review all the options. As eBay explains on this page, you can 
increase your odds of selling by enhancing the listing. 

10. When you're sure you're ready, click List Item for Sale button at the 
bottom of the page. 

A Congratulations page appears. 

11. Click the View Your Listing to see the listing. 

An example is shown in Figure 7-12. 
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Figure 7-12: 

To list — 
perchance 
to dream! 
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.-Fiction Book; > History > Gteat Britain > Other 



Item number 8434122508 



Yon ate siijneri in This item is being tracked in M y eBay 1 Email to a friend I Printer Version 

Seller status: Your item has no bids. (To make changes to your listing, click the "Revise your item" 
link). 

W.int to sell moie quickly a\u\ efficiently? Learn about how 
Turbo Lister can help you save time. 



Change your cross-promoted items 
Revise your item 
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Seller; rtummiesbudman (0) £ 
Member: since 14-Jun-OB in United 
Kingdom 

Registered as a private seller 
Read feedback comments 
Ask seller a question 
Add to Favourite Sellers 
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Selling \lour First Item 

Now it's time to track your first sale. Visit eBay repeatedly during the selling 
period. Click on My eBay, and then on the Selling link. You'll see a summary 
screen like Figure 7-13. 

Watch bids come in. If your item sells, do the following: 

v 0 E-mail the buyer with congratulations and next steps. 

Quickly pack the item and ship it. Remember to insure the shipment. 

]S Check in with the buyer daily about progress of the shipment. 

v* Ask the buyer if they're happy with the item. If not, ask the buyer if they 
want a refund, and provide it quickly. 

f* If the buyer is happy, give the buyer a good Buyer Rating on eBay. Ask 
that they give you a good Seller Rating as well. 
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Figure 7-13: 

Manage 
your auction 
with eBay. 
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Even if your initial sales effort is unsuccessful, or not very profitable, you're 
off to a good start. Having completed your first effort, you're now ready to 
put as much or as little further effort as you'd like. 




You can, of course, do much, much more with eBay. Use the books mentioned 
at the beginning of this chapter, and the vast amount of eBay information 
online, to build up your business. 



Use a non-eBay Web page, as described throughout this book, and services 
like Flickr (see Chapter 5) to support your efforts by linking to these outside 
resources from your eBay description. Enjoy watching the money roll in! 
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ages Work Harder 



The 5 th Wave By Rich Tennant 




"Come on Walt - time to freshen the company 

Web page." 



DropBooks 











In this part . . . 

■ t's time to META-tate on META tags and other tricks to 

help Web search engines find your hand-crafted Web 
pages. Then organize your text and add graphics to make 
your pages interesting and worthwhile. 
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In This Chapter 

Making it all work 
Understanding HTML 
Examining key HTML tags 
Creating a blank page with HTML 
Browsing your own little Web 



nowing the basics of HTML — Hypertext Markup Language, in case you 
W ▼ didn't know that — is a good thing. HTML is the code that connects the 
text content of your Web page with the graphics, links, and appearance users 
see in a Web browser. If you know the basics of HTML, you'll understand why 
Web pages look and work the way they do, and you'll understand how you 
can create and improve your own Web page. 

In earlier chapters, we've shown you how to do all sorts of cool things on the 
Web without learning HTML. But if you know a bit of HTML, you can usually 
dress up even a ready-made Web page on GeoCities (Chapter 2) or a blog on 
Blogger (Chapter 6). And as you become more familiar with HTML, your 
powers increase. 

But trying to figure out a lot of HTML right away is a bad thing. Spending 
hours and hours going over all the details of HTML is likely to slow your 
quest to become a Web publisher. And becoming a Web publisher quickly 
can, again, be a good thing. So don't let a bad thing get in the way of good 
things; use this chapter to find out just enough about HTML to help you 
create some basic pages and get them on the Web. 
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hy bother with HTML basics? 



[tools try to hide HTMLfrom 
the user; you can use one of these tools to 
create a Web page without knowing a thing 
about HTML. But here are several reasons to 
figure out the basics of HTML: 

Because everyone else is: Bad reason. Next! 

*<" To understand how the Web works: This 
understanding is pretty valuable if you're a 
heavy Web user (or a light one), especially 
if you plan to publish on the Web. Some of 
the Web's limitations, such as "what you 
see is not (exactly) what you get," are hard 
to understand if you don't know something 
about HTML. 

i"* To use free Web tools: Many free Web tools 
enable you to enter HTML tags directly to 



jazz up your text. Knowing a few tags can 
go a long way. 

(<" To work directly in HTML: Many Web pros 
tire of managing HTML tags by hand and 
start using a tool that hides the tags. Others 
swear by HTML. Everyone swears at HTML, 
at least some of the time. But the only way 
to have a choice is to know some HTML. 

W To do better work using a tool: When you're 
using a tool that hides the gory details of 
HTML from you, knowing enough HTML to 
understand what's going on "behind the 
scenes" is an advantage. In fact, tools that 
hide the HTML almost all have a mode that 
lets you see and work in HTML when you 
choose to, for just that reason. 



Get Ready: A Refreshingly Brief 
Description of HTML 

HTML is a specific way of adding descriptive tags to regular text so that all 
the formatting, linking, and navigational information you need in a Web page 
is in text form, contained in the same file with the regular text that appears 
on the Web page. HTML is designed to be something that humans can read 
and that machines can process, a kind of common ground for human-to- 
machine communication. 

Suppose you want to add bold to a word in your text, such as: 

You can use HTML to specify that a word is bold. 

To add bold formatting to a sentence using HTML, just take the regular sen- 
tence and add a couple of tags to specify where the bold starts and stops. 
Here's the previous line in HTML: 

You can use HTML to specify that a word is <b>bold</b>. 
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When you display the sentence with the HTML tags in a Web browser, the 
browser displays all the words, but not the tags — the information between 
ckets. The Web browser uses the tags to do extra things to the text, 
dd formatting to it. In this case, the formatting is simple: Start using 
bold text immediately after the word "is," and stop using bold text immedi- 
ately after the word "bold." 



Because HTML tags exist alongside the text that users see on your Web page, 
a document with HTML tags in it is called HTML-tagged text. A file with HTML- 
tagged text in it is called an HTML file — but it's really just a specific kind of 
text file. 



An HTML file usually has the extension . htm or . html at the end of the file- 
name. If you look at HTML-tagged text in a text editing program, you see the 
angle brackets and HTML commands; if you look at it in a Web browser, you 
see a Web page with formatting, links, and so on. 

A document with no formatting — such as italic and other formatting added 
by a word processor — is called a plain text document. HTML-tagged text 
documents are considered plain text documents because they're made up 
only of text characters, even though some of the characters carry formatting 
information. Word processing documents that aren't plain text documents 
have additional formatting codes embedded in them to tell machines how to 
display and print the text. 

You can add HTML tags to regular text to create your own Web documents in 
any text editor or word processing program. (However, in a word processing 
program, you must explicitly save the Web document as a text file.) Or you 
can use a Web editing tool that hides the gory details of HTML tags. 

This chapter gives you enough background to know what you're seeing when 
you look at text that includes HTML tags, and to make a few changes in 
HTML-tagged text if you need to. We don't burden you with hundreds of 
pages of HTML tags, tips, and tricks. You can find some of the more technical 
details and background in the sidebar called "The helter-skelter growth of 
HTML." (Try it; you'll like it.) And there's a full HTML appendix at the back of 
the book (Appendix B). 

After you publish a few Web pages, you can take the time to find out more 
about HTML. At that point, you may want to buy yourself that 400-page HTML 
book. 



If you like to know everything that's going on before you roll up your sleeves 
and plunge into things, you may want to start by looking at HTML For 
Dummies, 4th Edition, a comprehensive guide to HTML by Ed Tittel and 
others (Wiley). 
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Examining the HTML script 



Take a closer look atthe term for which HTML is 
an acronym, HyperText Markup Language. You 
may already know that hypertext is text that has 
links in it. A link is just a connection to another 
file. So far so good. But what's a markup lan- 
guage! (It's not that confusing language that car 
dealers speak when they decide how high to 
jack up the price!) A markup language is simply 
a way to put information about a document — 
for example, information about hypertext links 
and formatting — in the document itself. 
Markup languages often use tags — labels 
placed within text that give display instructions. 
So HyperText Markup Language — HTML — is 
a specific way of using tags to convey informa- 
tion about a document. 

Most tags in HTML come in pairs: One starts a 
change and the other ends it. In the following 
sample sentence, the firsttag, <b>, means start 
displaying text in a bold typeface; the second 
tag, </b>, means stop using bold. 

Here's how the sentence looks when "marked 
up" with HTML tags: 

That's a <b>good</b> idea. 

Here's how the sentence looks when displayed 
on-screen: 

That ' s a good idea . 

The browser reads the original, text-only sen- 
tence — That's a <b>good</b> 
idea . — and says to itself, "I display That ' s 
a, turn bold on, display good, turn bold off, and 
display idea." The person who created the 
original sentence puts in the HTML tags, the 
browser interprets them, and the user only sees 
the effect — in this case, the word good dis- 
played in boldface type. 



The <b> and </b> tags are formatting tags 
that describe how a browser displays text. 
Another kind of tag in HTML is the linking tag. 
Linking tags specify outside information brought 
into a document. Here's some complicated- 
looking HTML text that shows examples of for- 
matting and linking tags: 

To learn about 

<i>Pokemon< / i> , the 
"pocket monsters" that 
were so popular with kids, 
go to the official Web 
site for <a 

href ="http: / /www . pokemon . c 
om">Pokemon</a> . 

The text appears on-screen as follows: 

To learn about Pokemon, the 
"pocket monsters" that 
were so popular with kids 
some years ago, go to the 
official Web site for 
Pokemon . 

The <i> and </i> formatting tags specify that 
the first occurrence of the word Pokemon is dis- 
played in italics. The <a> and </a> linking tags 
specify that second occurrence of the word 
Pokemon is displayed as an anchor — that is, the 
starting point of a link. On most browsers, as here, 
anchors are underlined. So what does the extra 
text — href="http: //www. pokemon. 
com" — inside the <a> tag mean? href is short 
for Hypertext REFerence. If you click the anchor, 
your browser looks for the URL that serves as the 
hypertext reference, which in this case is the 
Pokemon Web page address that appears after 
the equal sign. 
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ee HTML anytime you use the Web. Just pull up a Web page in your 
and choose ViewOSource for Internet Explorer, or a similar com- 
mand for other browsers. A new window opens, the contents of which are the 
HTML source code that underlies the Web page. Figure 8-1 shows the home 
page of the For Dummies site and its HTML source code as an example. 

Having the ability to instantly view a document's HTML code naturally leads 
to the temptation to "borrow" attractive documents from the Web, save them 
to your disk as HTML files, and then use them as templates for your own 
work — kind of a magpie approach to Web page building. 

Borrowing someone else's material is okay for basic HTML formatting, but for 
more sophisticated formats that are distinctive and embody a great deal of 
work, get permission before you use them — or don't use them. Simply con- 
tact the Webmaster at the site you admire, describe how you want to use the 
format, and request permission. You may be surprised how many people say 
yes — without even exacting a promise from you that you hand over your 
firstborn. 



Figure 8-1: 

The For 
Dummies 
site is made 
of HTML- 
tagged text 
and 
graphics. 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans it 1 onal//EN"> 
<!— Build: R07B006 20040304T103221 — > 

<! — layout ( Default Layout for Dummies Home Page ) — > 
<html > 
<head> 

<1 i nk href ="/wileycDA/site/dummies/include/style. ess" type= "text /ess" 
rel ="styl esheet "> 
<title> 

Dummi es : : Home 
</title> 
</head> 

<body bgcol or = "#FFFFFF" bottommargin="Q" leftmargirWQ" 
margi nnei ght="Q" margi nwidth="Q" rightmarqin="0" topmargin="Q"> 
<table width="768 cellspacing="0" eel Tpadding="0" border="0"> 
<tr valign="top" > 
<td > 

<table width="218" censpacing="Q" cellpadding="0" border="0"> 
<tr valign="top" > 
<td > 

<! — staticFeature( ref : dummi es_home_leftnav_new ) --> 
<form name="searchForm" action="/remsearch. cgi "> 
<script language="Javascript"> 
function search() { 

var form = document . searchForm; 
var searchTerm - form. query. value; 

if (searchTerm == null | | searchTerm == "" | | searchTerm == " " 



al ert ("Pi ease enter a search term"); 
} else { 

form. submi t Q ; 



^^j^ Sports & Leisure 

^ T,a,pl 

Beyond the Classro , 
■rj http: www.duiiniiies.com WileyCDA Section hl-100004.html 



</scri pt> 

<table width="218" ce11spacing= 



cellpadding="0" border ="0"> 



| | | Internet 



1 
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HTML is a markup language that follows rules 
set out in a more complex specification — 
SGML (Standard Generalized Markup Lan- 
guage). HTML has evolved to Version 4, and 
most, Web browsers and Web authoring tools 
support all the features of HTML 4. However, 
some of the new features in HTML 4 are sup- 
ported differently in different browsers, and a 



few users still are running browsers that only 
support earlier versions of HTML. For the widest 
possible audience, stick with older tags, such 
as those in the HTML 3.2 specification or earlier. 
Nearly all the capabilities we describe in this 
book are from the most widely supported, early 
versions of HTML; we point out the few times 
we use more advanced features. 



Creating HTML documents 

You can create HTML documents in a word processing program, in a text 
editor, or by using an HTML tool. Each method has its advantages: 

Word processing program: Most new versions of popular word process- 
ing packages include "save as HTML" capability. You can open and 
edit a document in the word processing program and then save it as 
HTML-tagged text that makes up a Web page. However, the conversion 
process between the many features that a word processor supports 
and the smaller range of features supported by HTML is less than 
perfect. Ironically, you can only use your familiar word processing 
program to edit HTML documents effectively if you understand what 
formatting HTML directly supports, which you find out about in this 
chapter. 

Text editor: A text editor is a program that edits regular text, such as 
the dull, boring, plain text that many people send e-mail messages in — 
no fonts, no bold or italic text, and no styles. Windows Notepad is a 
good example. (You can find Notepad in the Windows Start menu, 
Programs folder, Accessories subfolder.) You can use a text editor to 
create a file with HTML tags in it. When you save a file from a text editor, 
it saves as plain text, with no added, hidden codes for formatting. (But 
save it with the extension . htm to distinguish it as an HTML file.) 
Although most text editors lack the advanced features found in word 
processing programs, many HTML experts swear by them. (You can 
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also create a file in a word processing program and then save it as a text 
file to achieve the same effect, but you have to remember not to save it 

1™^ »*Ar> D r\ r\ L^fc* word processing file -) 

L-^ I V/ yj D \J \J lAwIlL tool: An HTML tool hides some of the details of HTML from you. 

However, you have to go through a learning curve for any HTML tool, 
and few tools completely hide HTML. So the basics we present in this 
chapter help, even if you plan to use a tool. By knowing the basics, you 
can make better use of the tool and have some alternatives if the tool 
doesn't do everything you need it to. (And what tool does?) 

After you create an HTML file, save it with the .htm extension. The extension 
enables the Web browser to recognize the file and interpret it correctly. If you 
use the . html extension instead, not all systems can recognize it as an HTML 
file. 




Use lowercase for your filenames. Unix-based systems — that is, the majority 
of the world's Web servers — are very picky about upper- versus lowercase. 
So if you use ALL CAPS, or mlxEd CaSe, your file will work fine on your 
Windows system, which ignores capitalization differences, and then stop 
being accessible, except with exactly the right capitalization, when you move 
it to a Unix-based one. This means that links that don't use exactly the right 
capitalization suddenly "break" as well, smashing your Web site into a pile of 
unconnected Web pages. 




Every computer allows different kinds of filenames. But for your Web pages 
to work on the widest possible range of systems, keep your Web filenames 
simple, and within the 8x3 filename limits of DOS. (One example of an 8-x-3 
filename is filename . ext; up to 8 characters before the period, up to 3 
characters after.) HTML files end in the characters .htm Also, leave spaces 
and special characters such as colons or apostrophes out of the name. This 
way, your filenames are valid regardless of the type of computer that ends up 
being the Web server for your pages. 




One of the most frustrating problems that beginning HTML authors run into 
is the fact that word processing programs now try to function as HTML edi- 
tors and make working directly with HTML tags hard. These programs want 
to hide the tags from you and "let" you work in a formatted document where 
you don't see the tags directly, which is easier at first but gives you less con- 
trol. If you work in Microsoft Word or WordPad (which comes with Microsoft 
Windows) and save the file in text format each time, you can have direct 
access to the HTML tags. You must be persistent, though; Word or WordPad 
asks you repeatedly if you want to save the file as a formatted document. Just 
say no! 
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you create your HTML file, you need to check frequently to see 
going to look like on the Web. Some HTML tools offer special pre- 
view modes, but you can get the best idea of how your HTML file will look on 
the Web by using your Web browser. 

While working in your text editor or word processing program or while using 
an HTML tool, simply save your file to disk. (Remember to save the file using 
the .htm extension.) Then open your Web browser. In Internet Explorer, 
choose FileOOpen, click the Browse button to find the file, and then open it. 
In other browsers, use a similar sequence of commands. 

The file appears in your browser just as it does when the file is posted on the 
Internet. If you're connected to the Internet, you can even click links in your 
document to see the appropriate graphic or Web page. 

However, what you see may not be what other people see when they open 
the file; other people may use different browsers, and they may specify differ- 
ent fonts for displaying Web pages. And accessing a file from your hard disk 
is much faster than accessing the same file from the Internet. But at least you 
get an idea of how the page looks. 

If you can run your editing tool and your browser at the same time, all the 
better. (In Windows, use the Alt+Tab key combination to shift quickly 
between applications. On the Mac, use the Dock, the application list across 
the bottom of the screen.) You can change the document in your editing tool, 
save the file, and then use the Refresh command or similar command in your 
browser to see the changes. (Kind of like those bumper stickers you may 
have seen on the freeway that say "Keep Honking, I'm Reloading.") This way, 
you never need to be surprised by what you see after something you created 
is published on the Web. 

If you're tricky — and have a big-enough screen, or two monitors — you can 
size and arrange the windows on your screen so that you can see both the 
HTML file you're editing and the browser window that displays the resulting 
Web page at the same time! 

But don't stop there. See what your document looks like on different 
browsers before you publish on the Web. You can get copies of the top 
browsers from the Web sites of the main browser companies, as described in 
Chapter 5, and preview your document in them as well. For Safari, the main 
browser on the Mac, you'll need access to a Macintosh. Apple stores gener- 
ally have many Macs on Internet connections, so you can get a Mac-based 
view of any page that you've published to the Web. 



Chapter 8: Introduction to HTML 



Get Set: HTML Horse Sense 



pBooks 

HTML fall 



ed to refer to common sense as "horse sense." Most things about 
HTML fall under the realm of horse sense. After you see HTML tags a few 
times, most of the rules "feel right," and you have little trouble remembering 
or using them most of the time. You will occasionally make mistakes, though; 
don't be surprised to see that most of a document's text is in italics because you 
forgot to add a </i> tag to end italics. (Having these last several words in ital- 
ics is the authors' idea of a joke.) 



Basic HTML rules 

Here are a few basic HTML rules and some "gotchas" to watch out for: 

V Most HTML tags work in pairs. (Does that make these dynamic duos 
"tag teams"?) 

For example, if you want some text to appear in bold, you have to put 
<b> at the front of the text that you want to have appear in bold, and 
you have to put </b> at the end of the text. (The slash, /, indicates that 
a tag is being turned off.) If you forget the </b> at the end, you can 
easily end up with a document that looks fine at the start but then 
switches to bold somewhere in the middle — and continues in bold all 
the way through to the end. 

So remember to use paired tags and to check your document for 
unpaired tags before you publish it. If you still end up seeing italics or 
bold all over your document, you know what to look for. 

HTML tags are written in lowercase. 

Convention used to say you should put HTML tags in ALL CAPS so that 
they would stand out from the text they're embedded in. However, 
newer standards specify lowercase for HTML tags. 

i>* HTML ignores paragraph symbols and tabs in your text. 

One of the most confusing things about HTML is that it ignores the para- 
graph markers created in your text when you press the Enter key, as well 
as tab characters. When displaying HTML, the browser automatically 
breaks lines to fit the current window size. And the browser makes a 
paragraph break only when it sees the paragraph tag, <p>, or some 
other tag that implies the start of a new line (such as a top-level heading 
tag, <hl>). 

u* HTML needs you to put paragraph tags ( <p>) between paragraphs. 

No matter how many times you hit Return while typing your text, you 
don't prevent the text from showing up as a big blob on your Web page 
unless you put paragraph tags (<p>) between paragraphs. 
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Injrying to format your text — to get a bit of extra space before a 

er, or even up two columns of text — it's natural to want to put in 
iple paragraph tags to create some extra white space. No go — most 
browsers treat multiple paragraph tags (<p>) as a single tag! This makes 
it much harder to control spacing on your page. 



i>* Basic HTML looks different on different types of browsers. 

Basic HTML doesn't give you much control over the appearance of your 
document. (Newer versions of HTML allow more control but aren't sup- 
ported by older versions of popular browsers, so we suggest that you 
avoid the new stuff.) Different browsers handle the same tags differently. 
For example, a top-level heading (specified by the <hl> and </hl> tags) 
may look larger in one browser than in another browser. 

Some tags don't work on some browsers. 

Some browsers (such as Netscape Navigator) support tags that other 
browsers can't handle. We recommend that you stick with basic tags to 
avoid the chance of giving users nasty surprises when they view your 
documents. We use only those tags in this book. 

V Users configure their browsers differently. 

As if the differences among different browser versions weren't enough, 
users can configure their browsers differently. Users who have bigger 
monitor screens tend to look at documents in a bigger window. But 
because these users sit farther back from their big screens — remember 
your mother telling you always to sit at least six feet from the TV? — 
they may also use larger font sizes to display text. Some users set their 
browsers to display all graphics as the page transmits; a few turn off 
graphics. All these idiosyncrasies can make your document look differ- 
ent to different users. Figure 8-2 shows the Web page for the For 
Dummies site, displayed with different option settings. As you can see, 
the figure doesn't look like the normal Dummies page. 



Ten key HTML taqs pius one 

The Cheat Sheet at the beginning of this book shows an example of an HTML 
document, which is just regular text plus tags — those funny things with the 
angle brackets around them. If you haven't already, tear out the Cheat Sheet 
so you can look at the sample HTML document while you read this section. 
Table 8-1 summarizes the tags we use in this chapter. 
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Table 8-1 Key Tags to Use 



Tags 


Tag Location 


<head>, </head> 


Put these tags around the <title> and 
</title> tags at the start of the document. 


<title>, </title> 


Put these tags around a short title that describes 
the document, which appears at the top of the 
hrnwspr window (For mnrp information ahnntthp 


<head>, </head>, <title>, and </title> 
tags, see the section "Head users your way to win" 
in this chapter.) 


<body>, </body> 


After you add the </title> and </head> tags 
to end the title and header area, you surround 
everything below them in the document with the 

<body> and < /body> tags. 


(continued) 
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Table 8-1 (continued) 

k Tag Location 

</hl>. Put the initial heading at the top of your document 

<h2>, </h2>, . . . between the <hl> and </hl> tags. Then use 

higher-numbered tags for progressively lower 
heading levels. You can go down six levels (<h6>, 
</h6>), which is a lot — this whole book uses 
only three heading levels. If a bookthat weighs in 
at 350-plus pages needs only three levels, you have 
to create a pretty detailed Web page before you 
need five or six. 



<b>. 


</b> 


Surround text you want to display in bold with 
these tags. 


<i>, 


</i> 


Surround text you want to display in italic with 
these tags. 


<p>. 


</p> 


You don't need to place the paragraph-break tag at 
the end of headings and in some other places, such 
as within a list, but you do need the tag everywhere 
else. Besides the anchor tags (<a></a>), <p> 
may be the easiest common tag to misuse. The end 






paragraph tag, < / p>, is basically optional for 
beginners. 


<hr> 


The horizontal rule tag displays a horizontal line 
that is good for separating sections of documents. 


<a>, 


</a> 


The anchor tags define hypertext links and contain 



hypertext references, somewhat complicated infor- 
mation about where the linkgoesto. Link text — 
the text that gets underlined to indicate a hypertext 
link — goes between the tags. When the user 
clicks the underlined linktexton a Web page, the 
display changes to show the Web page indicated 
by the hypertext reference. 

<a href="http: // The <a> and </a> tag pair defines an anchor, href 
www. aSite.edu"> indicates a hypertext reference — inthiscase,a 
My kid's site.</a> pointer to a Web site's URL. The link text is My 

kid' s site; the user sees this text, underlined, 
as part of the Web page. See the section on 
anchors near the end of this chapter for details on 
these and other kinds of hypertext links. 
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src= "budpic . 



The img tag brings in any image that's in a format 
that the browser understands, either GIF or JPEG, 
and displays it as part of the Web page. The src 
part of the tag tells the browser where to find the 
file. In this example, the filename is budpic . gif 
and is in the same directory orfolder as the HTML 
file that the <img> tag is in. (You can tell it's in the 
same directory because the filename doesn't have 
any pathname information in front of it, such as 
/images /budpic . gif.) 



For an example that uses these tags, see the Cheat Sheet. For a list of HTML 
tags, see Appendix B. 



Go: Creating a Web Paqe With HTML 

Yes, you are just about ready to create a Web page with HTML. However, the 
whole secret of using HTML is knowing what tags to use and when. So now 
that you know what a tag is, what more do you need to know? Well, tags are 
divided into three kinds: 

Tags that contain meta-information about your document: Meta- 
information, such as the title in the header section of your document, 
doesn't affect what shows up within the body of the Web page; instead, 
this information is used by various Web tools, such as Google and other 
search engines, that look at the title to see what your document is 
about. (And we never "meta" Web tool we didn't like!) 

Tags that mark the role of your text: These tags (<hl>, </hl> and <h2>, 

</h2>, for example) describe the role of your text — and also cause it to 
be formatted in specific ways that may differ from browser to browser. 

\S Tags that format characters in your text: These tags (<b>, </b> and 

<i>, < / i>, for example) do nothing but modify the way your text looks 
when the browser displays it. 

Linking tags: These tags connect the user to different kinds of information 
and even to other documents. The section "Looking back (and forward) in 
anchor," earlier in this chapter, explains linking tags in detail. 
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After you create and save an HTML file with text and these different kinds of 
tags, pat yourself on the back. You've just created a complete HTML docu- 
d you're well on the way to being a tagger yourself! (Not the kind of 
at puts graffiti on buildings, but the kind who expresses himself or 
herself electronically on the Web.) 



Creating a blank file far your HTML 




HTML files include only plain text — no hidden formatting codes from your 
word processing program. And the name of the document always ends with 
. htm. So start by creating a text-only file to hold your Web page's text and 
HTML tags. 



To create a blank plain-text document that you can insert HTML code into, 
follow these steps: 



1. Start your text editor or word processing program. 

Either Notepad for Windows, or TextEdit for Mac, is a good place to 
start. 

2. Open a new document. 

Some programs automatically open a new document when you start 
them. In that case, you can skip this step. 

3. Start the process of saving your document so that you can name it. 

If you use a word processing program, use the Save As or similar com- 
mand and choose Text as the type of file. 

Don't choose the Text with Line Breaks option; line breaks make the doc- 
ument harder to edit. The good ol' Text option does the job. 

4. Name the document. 

Put . htm at the end of the name. 

5. Save the document. 

In most programs, you click a Save button or press Enter. 



The steps enable you to create a blank HTML document — which isn't very 
interesting if you put it on the Web! So now you want to start filling in your 
document by adding heading information. 



sj^NG.' Recent versions of Microsoft Word and other word processing programs may 
try to "help" you in a way that interferes with what you're trying to accom- 
plish. For instance, when you tell Word to save your file as a text file, it auto- 
matically changes the suffix to . txt. Change it back to . htm, and then save 
the file normally. 
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e bad news: You start your HTML documents with some tags that 
lly do much for the appearance of your Web page. In fact, the tags 
add a few more things to worry about. And you thought that you could finally 
start getting some real work done! 

Now, the good news: These tags make the Web a better place. They contain 
introductory meta-information — descriptive information about your docu- 
ment that doesn't affect how the user sees your document. But although the 
user doesn't see these tags directly, the tags support search tools and other 
tools that make finding a Web page — hopefully, finding your Web page — so 
quick and easy that users can get to it straight away. (Of course, looking at a 
lot of other things in between can be half the fun of using the Web.) 

<html>, </html>: These tags surround everything in your document and 
identify the document as being in HTML. As the Web supports more and 
more different types of files, these tags become increasingly important. 

<head>, </head>: These tags go around the title of your document and 
any other information that doesn't appear within the Web page itself. 
For now, that just means the title. 

<title>, </title>: These tags go around the title of your document. 
The title is a short phrase that describes your document and doesn't 
appear within the body of your Web page. It does appear, however, 
within the strip at the top of the document window when your Web page 
is viewed. 

<body>, </body>: These tags go around everything in your document 
that isn't part of the head. The <body> tag goes just after the </head> 
tag, which goes just after the </title> tag. Note that the head is com- 
pletely disconnected from the body! 

If you use a tool that creates a Web page for you, such as the free services 
described in Chapters 2, 3 and 4, or SeaMonkey Composer, described in 
Chapter 9, you don't need to put these introductory tags in because the tool 
does it for you. However, you may need to add the <title> and </title> 
tags, and put the title of your Web page in between them yourself. 

Look at this well-mannered, albeit nearly empty, HTML document to see what 
the top of a Web page looks like: 

<html> 
<head> 

<title>A Brief Introduction to Electric Guitars</title> 

</head> 

<body> 

Some introductory information about electric guitars. 

</body> 

</html> 
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Popular Web tools use these tags to help people find your Web page. The 
Advanced Search option of the AltaVista Web-searching service enables users 
specifically by words in the title; just enter the phrase title: fol- 
the text you want to search for in the title. To access the AltaVista 
search engine, go to www. altavista . com. 




Microsoft Internet Explorer and Netscape Navigator use the title of your doc- 
ument — the phrase between the <title> and </title> tags — as the doc- 
ument description in their Favorites or Bookmarks menu. The title also 
appears in the title bar of the browser window when the page displays. 

To give yourself a head start each time you want to begin a new HTML docu- 
ment, create a text-only document in your word processing program or text 
editor with the head, title, and body tags already in place. When you're ready 
to begin a new HTML document, start by making a copy of this document. 

Follow these steps to create a text-only document that contains the introduc- 
tory tags: 

1. Open a new document. 

2. Save your document as a text-only document with the name you want, 
ending with . htm. 

See "Creating a blank file for your HTML" earlier in this chapter for 
details of how to do this. 

3. On the first line of the document, enter the <html> tag. 

4. On the second line of the document, enter the <head> tag. 

5. On the third line of the document, enter the <title> and </title> 
tags. 

Don't enclose anything within the <title> and </title> tags for now. 
After you copy this text-only document to create a specific Web page, 
you can enter the material that you want to use as the "title." 

When you are deciding what to include between these tags, remember 
that many Web tools use the information between these tags when 
searching for documents. 

6. On the fourth line of the document, enter the </head> tag. 

7. On the fifth line of the document, enter the <body> tag. 

8. Leave the sixth line of the document blank. 

The main content of the document goes here. 

9. On the seventh line of the document, enter the </body> tag. 
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10. On the eighth line of the document, enter the </html> tag. 

I ^WJjfitever else you do in your document, < /html> is always the last tag. 
V^l\wb the document. 




Getting a heading and some body 

Underneath the headings, your document needs some content — just plain 
old words, maybe highlighted with bold and italic where needed. 

Don't overuse the bold and italic tags. Like early desktop publishers, who put 
three different fonts on every line of text, HTML novices tend to put lots of 
bold and italic in their documents. (The formatting in the previous sentence 
was meant to be funny; please don't blame the copy editor for leaving them 
in!) When you preview your document in your Web browser, look for areas 
where you overuse bold and italic formatting. And when in doubt, don't use 
bold and italic. Your Web page's visitors will thank you. 

Here's how to put a top-level heading and some basic text into your Web doc- 
ument: 




1. After the <body> tag, and before the </body> tag, put in your top- 
level heading. Surround the heading with the <hl> and </hl> tags so 
that the browser knows that the text is a Level 1 heading. 

You may also repeat the text of your top-level heading between the 
<title> and </title> tags, as many Web publishers do. 

2. After the heading, type some text. 

For optimal use by Web search tools, the first paragraph in your docu- 
ment should be a brief summary of the document's contents. The title 
and the first paragraph should include the key words that you want 
people to be able to use in searching for your page. 

3. At the end of each paragraph, put in a </p> tag. 

No matter how many times you press Enter in your document, your 
dense browser doesn't get the message. It only understands that you 
want to end a paragraph and start a new one when it sees the <p> tag. 

4. Surround text with the <b> and </b> tags to make it bold. 

Don't overdo the use of the <b> and </b> tags! Starting out, use bold 
once or twice just to get a feel for it. 
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5. Surround text with the <i> and </i> tags to make it italic. 

Don't overdo italicizing, either! Use italic a few times in your first docu- 
t or two for practice. 





6. Try adding a horizontal rule. 

Add the <hr> tag in one or two places to create horizontal rules. (Not to 
start an argument with those who think that vertical or diagonal rules.) 

As with headings and other elements of your document, put the <hr> 
tag on a line by itself so that you can find it easily later to move or 
remove it. 

7. After you're done, check your tags. 

Be sure paragraphs end with a <p> tag to start the next paragraph, all 
<b> tags have a matching </k» tag, and all <i> tags have a matching 
</i> tag. 

The most effective way for many of us to check tags, believe it or not, is 
to print out the document and then cross out pairs of tags with a pencil. 
In the old days, computer programmers called this kind of exercise 
"desk-checking." 

8. Save your document. 

If you use a word processing program rather than a text editor, be sure to 
save your document as text-only, with . htm as the end of the filename. 

The Cheat Sheet at the front of this book shows an example of a simple Web page. 



Addltiq a tittle list 



One of the best ways to "break up" your Web page is to insert lists. HTML 
supports bulleted lists, numbered lists, and lists of definitions or descrip- 
tions. Although HTML makes creating lists easy, it doesn't give you direct 
control over how lists look. (Repeat after me, "Trust your browser, trust your 
browser. . . .") 



i>* Unnumbered lists (often called bulleted lists): Unnumbered lists dis- 
play as lists with bullets next to them and are "appropriately" indented 
(the indentation varies with different browsers and browser settings). 
The list you're reading now is a bulleted list, but it uses check marks in 
place of the bullets. 



Chapter 8: Introduction to HTML 



t 

DropBook 



f Ordered lists (often called numbered lists): These lists are similar to 
bulleted lists, but with — you guessed it — numbers in place of the bul- 
You can rearrange the items in the numbered list as much as you 
The browser automatically keeps things in order by putting in the 
right numbers when it displays the list. 





Definition lists: These lists usually alternate terms and their — duh — 
definitions. The term goes where the bullet goes in a bulleted list, and 
the definition goes next to it or on the line immediately below. 

You create all lists in basically the same way: You start the list with a begin- 
ning tag, such as <ul> for an unnumbered list. You then tag each item sepa- 
rately to let the browser know that it's a separate item. You use the tag <li> 
at the beginning of each item in both unnumbered and numbered lists; you 
don't use an end tag for individual list items. The list finally ends with a clos- 
ing tag — </ul> to end an unnumbered list, for example. 

The formatting in HTML lists often looks different than how you want it to 
look. For instance, many browsers display a bulleted HTML list with a blank 
line before the list items, but no blank lines between them. You can't change 
this formatting with standard HTML commands — and trying to change it by 
using tricky HTML is a very difficult process. Better to get used to the way 
HTML displays lists. 

The following steps show you how to create an unnumbered (bulleted) or 
ordered (numbered) list: 

1. Put in a tag to start the list: <ul> for an unnumbered list, <ol> for an 
ordered list. 

2. Put in an <li> tag to indicate a list item. 

3. Starting on the same line, enter the text for the list item. 

"Red Hot Chili Pepper Potato Chips" is a good way to start. 

4. For the remaining items in the list, enter the <li> tag followed by the 
item text. Press Enter at the end of each line to visually separate the 
items onscreen as you edit. 

You don't need to use an end tag for list items. Also remember that hit- 
ting Enter at the end of a line causes the cursor to move to a new line 
onscreen but doesn't cause line breaks in the HTML-tagged text; the 
browser starts a new line when it sees a new <li> tag or a </ul> tag. 
The <li> tag is one of those rare tags that doesn't come as part of a pair. 

5. Enter a tag to end the list — </ul> to end an unnumbered list or 
</ol> to end an ordered list. 
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r the <dl> tag to start the definition list, 
r the <dt> tag to indicate a definition term. 

3. Enter the text for the definition term. 

4. Enter the <dd> tag to indicate definition data — the description of the 
definition term. 

5. Enter the text for the definition data. 

6. For the remaining items in the list, enter the <dt> tag followed by the 
definition term and then enter the <dd> tag followed by the descrip- 
tion of the term. Press Enter at the end of each line to visually sepa- 
rate the items on-screen as you edit. 

As with other kinds of list items, you don't need to enter an end tag for 
definition terms or definition data. 

7. Enter the </dl> tag to end the list. 



Figure 8-3 shows an example that includes the three kinds of lists. Because 
people use the Web to find out new things and to look things up, lists are 
among the most important formatting elements in HTML. 



Figure 8-3: 
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Heie'.i a bulleted oi nnordeied, list 

• Ketchup 

• Mustard 

• Relish 

Here's a nimibeied, oi oideied, list 

1. eat 

2. drink 

3. sleep 

And this is the larelv-used definition list 

World 



Wide 



Web 



Where a spider weaves 
How a spider weaves 
What a spider weaves 
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f<h4>Here's a bulleted, or unordered, list</h4> 
<ul>- 

<li>Ketchup 
<1 i:-Mustard 
<li>Relish 

</u\> 

<h4>Here's a numbered, or ordered, 1 i sx <./h4> 
<o\> 

<1 i>eat 
<1 i>drink 
<1 i>sleep 
</□!> 

<h4>And this is the rarely-used definition list</h4> 
<dl> 

<dt>world 

<dd>where a spider weaves 
<dt >wide 

<dd>How a spider weaves 
<dt>web 

<dd>what a spider weaves 
</dl> 
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Looking back (and forward) in anchor 

{Hap^fiBer that HTML stands for HyperText Markup Language? Well, applying 
<ul throve tags is the markup part. Now hang on to your hat: Here's everything 
you need to know about the hypertext part. In this section, we demonstrate 
how to use hypertext to create links between information in your document 
and information in other documents. This stuff is a bit confusing at first, but 
after you understand it, you'll think of many exciting ways to use hypertext in 
your Web pages. 

In HTML, every hypertext link has two ends, which are called anchors. (You 
may think that putting anchors into a Web page makes you an anchorperson — 
but sorry, no seven-figure salary.) 

When you define an anchor, you use tags to specify two things: 

If The text or image that is highlighted as the place you click to follow the 
link 
The other anchor that you want to go to when you click the link 

Anchors are among the most complicated tags in basic HTML. But you don't 
want to say "Anchors away," as the old movie had it, because anchors 
expand the possibilities of your Web page tremendously. The following is an 
example of an anchor: 

<a href = "http :/ /www. listentoyourdog . com" >How to train 
dogs</a> 



Here are the parts of an anchor: 



<a>, </a>: These tags go around text that you want highlighted as a 
hypertext link (How to train dogs in the preceding example). Try 
to use text that represents the thing that you want to link to, such as 
"Adobe Corporation" or "my resume." The better this text describes 
the thing that you link to, the more helpful the text is to the user. 

v* href: This information falls within the <a> tag. When the user clicks the 
hypertext link, the browser brings up the Web location indicated by the 
pathname that appears after href. 

Hypertext reference: These characters follow the equal sign in the 
href part of the anchor and are enclosed in quote symbols. They are 
the pathname of the document that you link to. In the example, the 
hypertext reference is the name of a Web site: "http: / /www. 
listentoyourdog . com" . 
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When you post an HTML file on a server, some anchors in the file can point to 
Web documents on the same Web server as the HTML file, while other 

point to Web documents on other Web servers. When the document 
ther server, the anchor contains the document's full URL, in the 
same form as you type it in your browser. For example, an anchor pointing to 
the For Dummies Web site looks like this: 



<a href = "http :/ /www. dummies . com" >" For Dummies"</a> 



When the document that's pointed to by the initial anchor is on the same 
machine, the anchor contains the pathname of the document. The pathname 
specifies the file's location on the machine. 

For simple Web sites that you create, put all the documents in the same direc- 
tory or folder so that you have simpler anchors. Then you don't have to 
worry about pathnames! 

The pathname looks different depending on where the second document is in 
relation to the HTML document that contains the link. If the two documents 
are in the same directory or folder, the pathname is simply the filename. This 
is the simplest way to do it. 

But if the second document is in a different directory, you can use two meth- 
ods to specify how to reach it: absolute addressing and relative addressing. 
In absolute addressing, you use the path from the lowest-level, or root, direc- 
tory of the server to the second document. In relative addressing, you start 
with the location of the HTML file that's currently being viewed. You then use 
the path from the HTML file to the second document. 

To specify an absolute address, start with a forward slash (f) to indicate the 
root directory of the Web server. Then specify the full pathname from the 
root directory to the file. The following example shows an absolute address: 



/photoshp/samples/sunrise . gif 



To specify a relative address, start with the directory of the HTML document 
that the anchor is in and then enter the path that leads to the desired file 
from there. A pair of dots (. .) specifies the directory one level above the cur- 
rent one, also known as the "parent directory." 

For example, if you have an HTML file called sunset . htm in the directory 
/mysite/html, and you need a GIF graphics file that is in /mysite/html/pix, 
a subdirectory of the current directory, the relative address is the following: 



pix/sunset . gif 
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If you also need a file that is in /mysite/trial/pix, you use the . . charac- 
ters to specify the subdirectory above this one and then go back down the 
tree to the needed file. Put a slash after the dots. In this case, the 
ddress is as follows: 




. . /trial/pix/moonrise . gif 

Starting at the beginning of the path, " . . " means "the directory above the 
current one." The words separated by slashes, "trial /pix/, are the names 
of the directory and subdirectory in which the file is stored. And moonrise . 
gif is the filename. 

Usually, you create your Web site on one machine, and then publish it by 
copying the files to another machine, the Web server. Forgetting to copy all 
the files needed to the Web server is very easy. If you keep all the files in one 
overall folder — that doesn't have any files in it that aren't part of the Web 
site — you have a fighting chance of making the transfer successfully. 



Table 8-2 shows examples of anchors. 



Table 8-2 Examples of Hypertext Links (Anchors) 



Destination 


Sample Anchor 




Web page on same server, 
same directory 


<a href= 
text</A> 


"mydoc2 .htm">link 


Web page on same server. 


<a href= 


"personal /resume 


s . htm" > 



different directory; relative link text</A> 

addressing 

Web page on same server, <a href = " /maya/personal/ resume . 

different directory; absolute htm">link text</A> 

addressing 

Web page on a different server <a href="http: //www. mycorp.com/ 

job requirements . htm" >link 
text</A> 




The simplest way to handle addressing, and the one least likely to cause 
errors, is to put all documents in the same directory or folder. The next sim- 
plest way — best used for more complex Web pages or Web sites — is to use 
relative addressing. Relative addressing allows others to easily bundle up all 
the files needed for your Web pages and move them around on a Web server. 
Absolute addressing is the most error-prone. 
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HTML that gets asked a lot 
is about quotes: When do you need to put 
quotes around information in HTML? 

There are three answers to this: What you are 
supposed to do, what you can do, and what you 
should do. 

You're supposed to put quotes around every 
argumentyou provide in HTML — that is, any 
data you enter in HTML code, such as a file- 
name or a number. But things work fine if you 
follow a different strategy. 

What you can do is only use quotes when a 
space is in the data, such as a space in a file- 



name. With this approach, you never need to 
put quotes around numbers, for instance, 
because they never have spaces around them. 

But what you should do is get in the habit of 
always putting quotes around arguments, such 
as filenames, that sometimes have spaces in 
them and sometimes don't. That way, you're not 
caught out by a problem when you use a file- 
name with a space in it. 

(Using short filenames with no spaces is always 
a good idea, just in case, but in some cases you 
may need to use a file that you don't control the 
name of — such as a file on an existing Web site.) 



Unking for yourself 

Absorbing all this knowledge about hypertext links is pretty useless if you 
don't actually use the knowledge yourself. Here's a description of how to 
create a link; note how we cleverly work several different types of links into 
the steps: 

1. Open an existing HTML document. 

2. Move to the place in the document where you want to insert a link. 

3. Start the link by entering the opening tag, including the hypertext ref- 
erence that you want the link to lead to. 

For a link to a Web page in the same directory, enter the filename in quo- 
tation marks, as in <a href ="anotherdoc .htm"x/a>. ("another- 
doc.htm" is the filename.) 

As described previously in this chapter, you can enter a relative or 
absolute address for a document that's in a different directory within 
your Web site. 

For a link to a file in the graphics subdirectory of the current directory, 
enter the pathname: <a href =" graphics /dancers . gif "> 
Dancers</a>. 



For a document that's on a different server, enter the document's URL 
(for example, <a href ="http : / /www. ACoolSite . com"x/a>). 
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If you don't enter a specific filename after a directory name, on your own 
machine or on a Web server, the browser looks for the default file: 
d^iex . htm or index . html . 

^fter the opening tag, enter the link text. 



5. Don't forget the closing tag! 

After the opening tag and the link text, enter the closing tag. 

Linking from Within 

That's a lot of stuff to absorb! Just one more thing to consider: What if you 
want to link to a specific spot within the same Web page? 

Linking to a spot within a Web page is a good way to allow navigation within a 
long page. For instance, a page with a list of questions and answers may put 
all the questions at the top — then link to another copy of the question, fol- 
lowed by the answer, farther down on the page. 

To link to a specific spot, you need a pair of anchors. The first is at the spot 
from which you want to link, just like we describe in the previous section. 
This first anchor is just like the external links, but it has one more element — 
the name of a second anchor that's at the spot to which you want to link. You 
have to put the second anchor into the Web page you're linking to, at the 
spot where you want the link to go. For example, the following anchor links to 
a spot that's named "Bebak," within the same file as the first anchor: 

<a href = " #Bebak" >Bud ' s coauthor</az> 

The pound sign, #, denotes an anchor within a Web page. The second anchor, 
also called the link, is at the spot to which you want to link. The second 
anchor exists only to specify that spot and doesn't cause the link text to 
show up as underlined on the user's screen. Here's the link for the second 
anchor: 

<a name=" Bebak "></a>Arthur Bebak<p> 

The link doesn't need a pathname, but the anchor that links to it needs a 
pathname if the anchor and link are in different files. And you don't need any 
text between the anchor's beginning and ending. 

Try using internal links in an HTML document on your own machine, and test 
the links in your browser. Experiment with different kinds of relative addresses, 
or pathnames. Trying different links and pathnames gives you the experience 
you need to easily use these features in your "real" Web pages. 
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Linking to specific spots in your own Web page is common. Many Web sites 
have long Web pages that include clever internal links that move the user 
i the page. Linking to specific spots in other people's Web pages is 
ion. Why? Because controlling where the other page's author 
chooses to put link anchors is hard — and harder still to make sure that link 
anchors don't get moved around on you unexpectedly, rendering your anchor 
invalid. How would you like it if, for example, you defined a link to a serious 
essay on home wine making and later discovered that the essay had been 
replaced by a discussion of Greek philosophy? (Though much of the latter 
may have been inspired by consumption of the results of the former.) Sheesh! 



Brou/sing your ou/n utebtet 

Here's the moment you've been waiting for: Whether you've followed all the 
previous steps, or just some, you now have a ready-to-use little HTML docu- 
ment. To see whether you did it right, all you have to do is try it in your Web 
browser. That's right — you can view your very own HTML document in your 
very own browser! 

Not only can you view your HTML document from your browser, but you can 
even follow the links to other HTML documents on your local system and 
from your system out onto the Web. (We assume that your browser is con- 
nected to the Web at the time. If not, following a hypertext link to a Web URL 
is a short trip!) Using the Back command in your browser, you can even 
return to your own document. 

There's only one limitation to this testing: Other Web sites can't link to your 
HTML document because it's only saved on your local machine, not on a Web 
server. And that's the one thing that's stopping your HTML document from 
being a Web page: It's not hosted on a Web server. Details, details — we take 
care of that little omission in Chapter 16. 



Can your browser handle it? 



An anchor can link the current document to 
another HTML file or to some other type of file, 
such as a graphic, a sound, a video clip, or 
almost anything else. Most browsers know how 
to handle HTML files and GIFor JPEG graphics 
files automatically. Different browsers may 



handle other types of files in different ways — 
automatically, or by the user's specifying a pro- 
gram to handle them. So for these examples, we 
stick with links to HTML files and GIF and JPEG 
files because we know that those files work 
with just about any browser setup. 
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For now, you need to figure out how to view your HTML document in your 
browser. This is something you do every time you work on HTML documents, 
pcument; view it in your browser. Change the document; view it in 
ser. And on and on . . . (Maybe it's finally time to buy that 20-inch 
computer monitor you've been thinking about so that you can see both docu- 
ments at once as you switch back and forth.) 



To view your HTML document in your browser: 

1. Start your browser. 

2. Choose FileOOpen (for Internet Explorer) or similar command (for 
other browsers). In the Open dialog box that appears, click Browse. 

3. Find your HTML document on your hard disk and open it. 

4. View your own HTML document in your own Web browser. 

You can even follow links by clicking them. If you do, use the Back com- 
mand in your browser to return to your HTML document. 

5. Look for problems in your HTML document or things you want to add. 

So half of your document is in italic and the rest is underlined as if it's all 
part of a link . Who cares?! Go fix it! 

6. Open the HTML document in your text editor or word processing pro- 
gram and fix it. 

You don't need to close your browser to work on the HTML document. 
Note: The earlier sections of this chapter may be of some help here. 

7. Save the changed HTML document. 

If you forget to save the document, your changes don't show up in your 
browser, and you then wonder whether your changes "took" or whether 
you're losing your sanity. 

8. Use the Refresh command or a similar command in your Web browser 
to reload the fixed HTML document. 

If you forget to reload the document, your changes don't show up in 
your browser, and, again, you wonder whether your changes "took" or 
whether you're losing your sanity. 

If you forget to save the document after you make changes, or forget to 
reload the document in your browser, the changes you just made don't 
show up. Anytime you think that this may have happened, just go back 
to your text editor or word processing program, save the document, 
return to your Web browser, and reload. The changes appear. 
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9. Repeat Steps 5 through 8 until you're done. 




(Done can mean until the HTML document is done, as in finished, or 
'iJ^Bl the HTML document's author is done, as in toast!) 

Don't forget to use the Refresh command when you're done modifying 
your document and want to look at it again in the browser. 



Looking to the next HTML steps 

The parts of HTML that we cover in this chapter represent just the basics. As 
you create, test, and deploy your own Web pages, you may want to under- 
stand more about HTML. 

If you use SeaMonkey Composer, which we describe in Chapter 9, or an 
online Web page service such as the ones we describe in Chapters 2, 3 and 4, 
you may be protected from the gory details of HTML. But you never know 
when you may end up back in "raw" HTML to add a feature or fix a problem. 
You can find lists of HTML tags on the Web at sources such as www.w3 . org. 
And don't forget that HTML 4 For Dummies, 4th Edition, by Ed Tittel and 
others (Wiley) is an excellent source for more detail on HTML. 



Advances in HTML 



Since the Web first became widely (and wildly) 
popular in the mid-1990s, several advances in 
HTML have taken place. These advances build 
on the solid base of the original HTML specifi- 
cation and add new capabilities. However, they 
also make HTML much more complicated and 
add many more issues for those who design 
Web pages. 

The biggest changes are the additions of tables, 
frames, and Dynamic HTML. Tables not only dis- 
play information in table form, but also are 



widely used to help precisely position text and 
graphics within a Web page. Frames allow a 
Web page to be divided into independently con- 
trolled sections. They are somewhat widely 
used, but not as popular as tables. 

We describe how and when to use tables and 
frames in Chapter 14. However, you can go far 
with the basic HTML specification that is usable 
by all browsers, so we stick with that version 
throughout most of this book. 
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In This Chapter 

Comparing WYSIWYG editing to plain text 
Using SeaMonkey Composer 
Using a text editor 



\j ou can use online tools, such as those we discuss in Chapters 2, 3, and 4, 
to create your initial Web page using a template. However, at some point, 
you will probably want to go further with your Web page than a template 
allows. To go beyond templates, you have to move away from the online 
tools and create your own Web page on your own hard disk. Then you can 
upload tried-and-tested Web pages to any number of different Web hosts, 
including Yahoo! GeoCities and AOL. 

This chapter describes how to create your initial Web page locally, on your 
own hard disk. The next few chapters describe how to improve your Web page 
and how to extend your Web page into a multipage Web site. Chapter 16 tells 
you how to publish one or more Web pages that are on your own machine 
onto the Web. 

This chapter helps you choose the approach you want to use and then shows 
you how to create your initial Web page. 

Yahoo! GeoCities and AOL each have advanced tools that let you go pretty 
far with your Web page. However, these tools lock you into having your 
hosting done on the service that provides them. If you feel comfortable 
keeping your Web page on the same host for a long time to come, you may 
want to continue using these advanced tools. The approach we describe 
in this book, however, gives you more opportunities to keep costs low and 
flexibility high. 
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Choosing Between W\lSlW\lG 
DropRftQfltiS Text 

You can use a couple different approaches to create and edit Web pages on 
your own computer. One approach is to use a WYSIWYG Web page editor. 
WYSIWYG is pronounced "whizzywig," and stands for What You See Is What 
You Get. A WYSIWYG Web page editor is like a word processing program — 
what you see onscreen is at least close to what you get when you publish 
your Web page and look at it online. 

The problem with this is that WYSIWYG doesn't work perfectly on the Web. 
As we describe in Chapter 8, different Web browsers can interpret the same 
HTML tags differently. Also, users can have different browser settings, which 
means the same page can take on a different look for different users. This 
variability undermines your efforts to make your Web page look just so. To 
work around these problems, and to create Web pages that work well on the 
widest possible range of computers and browser versions and settings, know- 
ing what's going on with the underlying HTML really helps. 

For this reason, many Web page publishers work directly with HTML tags. 
Others work with a WYSIWYG editor, but frequently check what the underly- 
ing HTML-tagged text — usually just called "the HTML" — looks like. 

We recommend that you either work directly in HTML or use a simple 
WYSIWYG tool that doesn't try to do too much for you, and look frequently at 
the underlying HTML. If you do want to use a tool, we recommend SeaMonkey 
Composer. 



Pluses and minuses of text editors 

The reasons in favor of editing HTML directly in a text editor are fairly simple. 
You work directly in HTML — never anything else. You're always looking 
directly at the HTML tags. Any time you want to add a feature to your Web 
page, you're forced to learn the HTML tags for that feature and use them, 
which means you're gradually learning the underlying language of Web pages. 

The reasons not to work directly in HTML using a text editor are fairly simple 
as well. Imagining what your Web page is going to look like is quite difficult 
when you're just looking at text and tags. You can easily make mistakes in the 
construction of your Web page when you're working directly with the tags — 
and easily get lost in looking at the HTML-tagged text when you're trying to 
remember where to make an addition or change. 
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Figure 9-1 shows a simple Web page as it appears when being edited in a text 
editor (left) and the SeaMonkey Composer editing window (right). You may 
o tell just from looking at the picture which kind of environment you 
work in. If not, try both, using the instructions in this chapter, and 
see which one you prefer. 



Pluses and minuses of 
SeaMonkey Composer 

Using a WYSIWYG editor such as SeaMonkey Composer has its trade-offs too. 
WYSIWYG editors shield you from the underlying HTML, so you can see what 
your page is likely to look like on the Web. But the underlying HTML tags are 
hidden from you, so you don't know exactly what's going on. The more capa- 
ble WYSIWYG editors support newer, more advanced HTML functionality as 
well — which is good if you want to use those functions, but makes creating 
Web pages that don't work well on all Web browsers all too easy. 



Figure 9-1: 

You can 
compose 
in a text 
editor or 
Composer. 
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<html > 
<head> 

<title>welcome to Netsurf er</titl 
<link REL="stylesheet" type="text J 
HREF=''http://www. netsurf . com/nsst 
</hed d> 

<body bgcolor="#FFFFFF"> 
<! — Main Table — > 

<table WIDTH="100%" BORDER=0 CELL 

<! — Start Masthead Row — > 

<tr VALIGN=MIDDLE> 

<td ALIGN=CENTER VALIGN=MIDDLE WI 

<img ALT="[Logo]" SRC=*'http://ww* 
</td> 

<td BGCOLOR="#33CCFF"> 

<img alt=" [Netsurf er] " SRC="http: 
<img alt=" [More signal, Less Mois 
wi dth=166> 

</td> 

</tr> 

<! — End Masthead Row — > 



<! — start Main Left Side Column 
<TD align="left" valign="top" bgc 

<! — Main Menu Table — > 

<TABLE border="o" align="left" ce 

<tr><td> 

<! — Start section Table — > 
<table border = "0" cell paddi ng="3 " 
<TR> 

<TD NOWRAP> I 

<font f ace="verdana, Arial, HelvE 



'J Welcome to Netsurfer |file:/.../Welcome%20to%20Netsurfer.htni] - Com...HlfiIQ 




File E «Iit View Insert Format Table Tools Window J 


elp 



4 ^ <j 4* # ^ ^ a ^ 



If New Open 



BotlyText |^| 



Publish Browse Print Lin I; image Tabl 

-a +a b / u ;e =e • n w m 



NETSURFER 

More Signal, Less Noise 



SUBSCRIBE 
FAQ 

CONTACT 



| We've been publishing ezines since 1994. 
I They're quite good Check them out. 

NETSURFER DIGEST 
NETSURFER SCIENCE 
NETSURFER EDUCATION 
NETSURFER ROROTICS 
| NETSURFER BOOKS 
NETSURFER LIBRARY 
NETSURFER FOCUS 

j 

\ T f »,w ™, o V mS>< y TRF HFP F 
y Noimal [lThJHTML Tags {<htiu> Source { >4x Preview \ 

© i <lio(ly><table> <tl>ody> <tr> |=! 



Part III: Making Web Pages Work Harder 



hat on earth is a SeaMonkey? 



ikey is a weird kind of pet, 
actually a brine shrimp that can be hatched 
from eggs that can last a long time. Generations 
of kids have had sea monkeys as a kind of half- 
pet, half-science project, sea monkeys are 
sold around the world; find out more at www. 
sea -monkeys . com. 

But the SeaMonkey we're interested in here is 
an Internet application suite. It's a descendant 
of the old Netscape Internet suite. (The now- 
popular Firefox browser is another offspring of 
Netscape.) Remember Netscape Navigator, the 
first widely popular browser for the Web, back 
when the Web was created in the early '90s? 
Maybe not — but that's okay, you don't need to 
know the history of SeaMonkey to use it. 

SeaMonkey is a suite of Internet applications, 
including a Web browser, e-mail client and, 
most importantly to us, an HTML editor. That's 
right — a simple and, best of all, free and easy 
to use tool for creating Web pages. 

SeaMonkey's HTML editor makes it easy to 
create simple Web pages without seeing 
HTML — and then turn right around and look at 
the underlying HTML, and even edit it directly. 
It's the best of both worlds, a "hand tool" that 



keeps you close to what you're creating, rather 
than a "power tool" for mass production. 

If you're a bit worried about putting something 
named after sea monkeys on your hard disk, 
don't be; the name is just a continuation of the 
whimsical sense of humor that has always been 
part of the Netscape project. SeaMonkey 
Composer is widely used, even by Web experts, 
to make quick work of HTML editing. (Look up 
"seamonkey composer" in a Web search 
engine if you want to verify this.) 

Of course, if you need more advanced features 
for Web page creation, you should purchase a 
tool such as Microsoft FrontPage, the industry 
leader, or Macromedia Dreamweaver, which is 
very popular with professionals. 

SeaMonkey Composer lacks advanced features 
such as checking for broken links, adding 
frames, or drawing tables. It doesn't deal 
well with code it doesn't understand, so you 
shouldn't use it to edit existing Web pages. But 
atthe same time, SeaMonkey Composer doesn't 
cost anything, and it produces cleaner HTML 
code than most other tools. Overall, it's a great 
tool for starting out. 



SeaMonkey Composer has most of the advantages of an HTML tool, with few 
of the disadvantages. Here are its six key advantages as an HTML tool: 

SeaMonkey Composer is free. SeaMonkey makes Composer available 
for free along with SeaMonkey Navigator, the offspring of Netscape 
Navigator, first widely popular browser for the Web. 

V It's easy. Composer is very easy to use. It leaves out some complex edit- 
ing functions in favor of drop-dead simplicity. 

Its functions match HTML tags. The functions available in Composer are 
the functions available in HTML — and only those functions. You can't 
do things in your Web page that aren't supported by Web browsers. 
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V It uses "generic" HTML. The only functions available in Composer are 
those supported by all widely used versions of HTML. Web pages that 
create with Composer are likely usable by all major Web browsers. 




ts you see and edit HTML. Composer gives you one-click access to 
the HTML tags underlying your Web page. You get ease of editing in 
WYSIWYG mode but can still always see and edit the underlying HTML- 
tagged text. 

It's part of the SeaMonkey Internet application suite. Composer comes 
with SeaMonkey's browser, SeaMonkey Navigator — which is a close 
cousin to Firefox, the second-most-popular browser for the Web. You 
should use SeaMonkey Navigator and Firefox, along with Internet 
Explorer, for testing your Web pages; whether you also need to use the 
other tools in the SeaMonkey suite is up to you. 

These features of SeaMonkey Composer place it comfortably between using a 
text editor and working directly with HTML tags, which can be frustrating 
and lead you to make mistakes in the look and layout of your page, or the 
more advanced HTML editors, such as FrontPage and Dreamweaver, which 
may overwhelm you with functionality. 

We recommend that most beginning Web publishers use Composer, and 
check the underlying HTML frequently to see what's really going on. As you 
get more knowledgeable with HTML, you may wish to buy and use a more 
advanced HTML editor — or go the low-tech route, as many Web profession- 
als do much of the time, and use a basic text editor. 



What if you use AOL or CompuServe? 



AOL and CompuServe each have built-in Web 
browsers that run within the program, some- 
what muddying the distinction between the 
online service itself and the open Web that 
anyone can access. But you can still run other 
browsers, with AOL or CompuServe providing 
the Internet connection. And you probably want 
to — the built-in browsers are not as good as 
Internet Explorer, Firefox, or SeaMonkey. 

Simply install the latest versions of Internet 
Explorer, if your current version is old, and 
SeaMonkey software. 

Start your AOL or CompuServe software and 
connect to the Internet. Then start your Web 



browser. (You can even start one browser, and 
then the other; recent versions of IE and 
Navigator can both run at the same time.) Use 
yourWeb browserto look at Web sites, includ- 
ing for testing your own Web site under devel- 
opment. Use SeaMonkey Composer to create 
Web pages. 

You can also test the Web page(s) you're devel- 
oping in the built-in AOL or CompuServe 
browserto make sure you don't have problems. 
However, testing with AOL or CompuServe is 
less important than testing in other browsers, 
especially Internet Explorer, which is still used 
by the vast majority of people on the Web. 



Part III: Making Web Pages Work Harder 



We recommend that you consider using Composer initially even if you own a 
more advanced HTML editor such as Dreamweaver or FrontPage. The func- 

^Bclnf l^of Composer is simpler, making it easier to learn the core features of 

^JJ|1\L^id you can follow along better with this book. 

If you already have Netscape or SeaMonkey software installed, you may 
already have Composer on your computer. Check StartOProgramsO 
Netscape 7.10Composer, or the corresponding folder and filenames on 
your system, to see if the Netscape/SeaMonkey browser, with or without 
Composer, is installed. If so, check to see if Composer is available, either as a 
separate program or as an option within the Netscape browser. If Composer 
is there, you can run the software you already have, or upgrade using the 
instructions in this chapter. 



Working With Composer 

SeaMonkey Composer has all the important basic features that you need to 
build basic Web pages. Using these features, you can: 

i Create and edit Web pages without seeing HTML tags 

V Drag and drop links to other Web locations without typing the URL or 
pathname 

f Cut and paste graphics into your Web page, resize graphics, and add 
alternate text 

Create and edit tables 

Create and edit forms — interactive data entry fields commonly found on 
Web pages 

You can also insert multimedia files and computer programs into your Web 
page. However, not all users can play back those files or run those programs 
because they may not have the appropriate browser or the right plug-ins 
installed. If you add advanced elements, such as multimedia files or com- 
puter programs, into your Web page, be prepared to test your pages with sev- 
eral different browsers and to tell your Web visitors what to expect. 

SeaMonkey Composer supports forms, but it can't give you the CGI scripts — 
short for Common Gateway Interface scripts — that you need to make the 
forms work. These CGI scripts process the data that the user enters into a 
form; if you can create CGI scripts, you're probably ready for a more advanced 
tool than Composer. However, if you don't want to mess with creating these 
scripts, you can get CGI scripts from others on the Web. 
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Composer doesn't support frames — advanced HTML elements that split a 
Web page into separate, scrollable pieces. Designing Web pages that work 
frames isn't easy, so it makes some sense that Composer, as a free 
isn't support frames. 




Although Composer doesn't support frames, it does enable you to add any 
HTML tags that you want directly into your Web page. However, the whole 
point of using a tool is to reduce the amount of HTML coding that you have to 
do; if you find yourself coding directly in HTML to avoid the limitations of 
Composer, such as the aforementioned lack of support for frames, consider 
buying a more capable tool, such as Microsoft FrontPage or Macromedia 
Dreamweaver. 



Running u/ith the SeaMonkeys 

At this writing, the current version of SeaMonkey software is called SeaMonkey 
1.0.2. You can choose which parts of the suite to download; you can get all the 
pieces that used to be in the Netscape Communicator suite, such as the e-mail 
application, or just the browser (which includes Composer), or any mix you 
want. For more about SeaMonkey, go to the SeaMonkey project page at www . 
mozilla . com/proj ects/seamonkey/ channels . SeaMonkey. com/ns/ 
browsers/, shown in Figure 9-2. 
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In this chapter, we tell you how to get the basics that you need for Web author- 
ing: the SeaMonkey Navigator 1.0.2 browser and SeaMonkey Composer. You 
load more pieces of the suite if you choose. Follow the instructions 
t section. 



In order to run SeaMonkey, you need one of the following system setups: 



*>* Windows: You can run SeaMonkey 1.0.2 on some versions of Windows 95 
or any later version of Windows — Windows 98, Windows ME, Windows 
NT 4.0, Windows 2000, Windows 2003, or Windows XP. You need a 233 
MHz or faster Pentium, 64MB of RAM, and 100MB of free hard disk space. 
(You can actually run SeaMonkey 1.0.2 on a somewhat lesser system 
configuration — as long as you have, or can clear off, enough hard disk 
space to install the parts of SeaMonkey 1.0.2 that you download — but 
performance does suffer.) 

v 0 Macintosh: For the Mac, you need a fairly recent version of the operat- 
ing system: Mac OS X 10.2 or later. Hardware requirements are similar to 
those for the PC: A 266 MHz or faster PowerPC chip, 64MB of RAM, and 
100MB of free hard disk space. 

f Linux: SeaMonkey 1.0.2 runs on Linux on Intel-architecture machines 
(usually called PCs). You need Red Hat Linux 7.0 or later — or the Linux 
kernel 2.2.14 with #glibc 2.3.2, GTK 2.x, glib 2.x, libstdc++-3.3, and 
XFree86 4.3.x. (That all sounds like "glib"-berish to us!) Hardware 
requirements are the same as for SeaMonkey running on Windows — a 
233 MHz or faster Pentium, 64MB of RAM, and 100MB of free hard disk 
space. As with Windows, you may be able to get by with a slower 
Pentium or less RAM, but performance is slow. 



If you have a UNIX workstation (not using an Intel microprocessor and Red 
Hat Linux), or a PC or Mac that doesn't meet the requirements, you can prob- 
ably get an earlier version of Netscape software that meets your needs. Find 
the older software at wp . netscape . com/browsers /4 /index . html. 



If you need to use an older version of SeaMonkey software, follow the 
onscreen instructions for installation. They are similar to the instructions for 
installing SeaMonkey 1.0.2, but not exactly the same. 



Getting SeaMonkey Composer 

The instructions in this section tell you how to get the newest version of 
SeaMonkey browser software (including Composer) only, not the remaining 
pieces of what used to be called the Netscape Communicator suite. That's 
because getting the browser and Composer only makes the download 
quicker and means you have a simpler software package that takes up less 
hard disk space. We show you where to click a different button if you want 
the other parts of the suite as well. 
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Be sure to upgrade your software if you have Netscape Navigator Version 6.0. 
Netscape 6.0 was widely disparaged as buggy, slow-loading software. Later 
such as 6.1 and 6.2, don't have the same problems. 
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Follow these steps to get the current version of SeaMonkey Navigator: 

Go to the SeaMonkey Web site at www.mozilla.org/projects/ 
seamonkey. 

The SeaMonkey Web site appears. This site is the default home page for 
the SeaMonkey Navigator browser. And this is just the beginning — as 
we describe in a later step, the complete download takes over an hour 
on a modem-based connection. 

Click the Download Now link for your system in the upper right-hand 
area of the window. 

For an English-language version for Windows, click the link windows , 
English (12MB). 

The File Download — Security Warning dialog box appears. 
Click Run. 

Missing this button is easy, because it's just as easy to click Save, which 
saves the program to disk. If you keep this option, you go through an 
unnecessary step of erasing the installation program. 

The program downloads into a temporary folder, which takes about 
five minutes over a modem connection, and then the SeaMonkey Setup 
Welcome dialog box appears. 

Click Next. 

The license agreement appears. 
Click Accept to accept the license agreement. 
The Setup Type dialog box appears. 
Choose Custom and then click Next. 

The Select Typical Components dialog box appears, as shown in 
Figure 9-3. 

Clear the Mail & Newsgroups, Chatzilla, Debugger, Inspector, 
Roaming, and Website Reporter check boxes, unless you need these 
programs for reasons other than Web page authoring. Click Next. 

The Mail program and other options add about 2.5MB to your download 
size and hard disk requirements. Leaving them out saves you time and 
disk space. 

The SeaMonkey Setup — Select Program Folder dialog box appears. 
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Figure 9-3: 
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8. Leave the Program Folder set to the default, SeaMonkey. Click Next. 

The SeaMonkey Setup — Quick Launch dialog box appears. 

9. Enable Quick Launch by making sure the check box is checked if you 
plan to run SeaMonkey Navigator as your everyday browser; other- 
wise, make sure to clear the check box. Click Next. 

Quick Launch moves part of the SeaMonkey Navigator startup code to 
your computer's startup process, which means some of the work of 
loading the program is already done when you launch Navigator itself. 
This shortcut costs you a few seconds every time you start up, and uses 
system resources that other programs may need, but saves you a few 
seconds every time you start Navigator. The tradeoff is worthwhile if 
you plan to use Navigator as your daily browser, and isn't worthwhile if 
you plan to use Internet Explorer or another browser instead. 

The Start Install dialog box appears. 

10. Review the choices you've made. If you need to make a change, click 
Back as many times as needed, make the changes, and then work your 
way back to this point. Then click Install. 

If you chose the minimal download we recommend — SeaMonkey 
Navigator plus the spell checker — the downloaded file is about 9.5MB 
in size, and takes a minute or so to download over a fast connection, 
about 15 minutes to download over a 56K modem. 

After the installation is complete, a dialog box appears asking if you 
would like to make SeaMonkey your default browser. We don't recom- 
mend this — most users would prefer to stick with Internet Explorer 
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(the default browser for most PCs) or Safari (the default browser for 
most Macs). If you want something different, Firefox is based on the 
e code as SeaMonkey, but is more up-to-date. Firefox is available at 

getf iref ox . com. 



11. Unless you're certain you want to switch, click No to setting SeaMonkey 
as your default browser. 

The SeaMonkey browser opens and the Getting Involved with SeaMonkey 
Web page appears on your desktop, as shown in Figure 9-4. SeaMonkey is 
now available from your Start menu. 

Using SeaMonkey Composer 

Throughout the remainder of the book, we describe how to use SeaMonkey 
Composer to make specific kinds of changes in your Web site. But before 
that, follow these steps to start Composer and get oriented to using it: 

1. Start SeaMonkey Navigator. 

Start Navigator from the Start menu by choosing StartOProgramsO 
SeaMonkeyOSeaMonkey. 

The SeaMonkey Navigator window opens. The SeaMonkey Project Start 
page is shown in Figure 9-4. 

The SeaMonkey Navigator browser starts and the SeaMonkey Project 
Start page appears. This site is the default home page for the SeaMonkey 
Project. (You can change the default home page by navigating to the page 
you want, and then choosing EditOPreferences. Choose the Navigator 
category, and then change your home page address by clicking the Use 
Current Page button, and then clicking OK.) 

2. Start Composer by choosing WindowCComposer. 

The Composer window opens, as shown in Figure 9-5. 

3. Pull down the menus and look at the flyout options and buttons to see 
what options are available. 

Composer's options are only those supported by HTML, so you can get a 
good idea of what you can do on any Web page by looking carefully 
through Composer's menu options. 

The remaining chapters in this part of the book go into detail about how 
to create a Web page using either Composer or a text editor, which is 
introduced in the next section. 
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Getting Involved with SeaMonkey 

CONGRATULATIONS! You've downloaded (or compiled) a stable version of 
SeaMonkey, 

If you want to help making this application even better, we would encourage you 
to take part the SeaMonkey testing community, Helping out won't take much of 
your time, doesn't require special skills, and will help improve SeaMonkey. 

What Needs To Be Done? 

You've already downloaded a build, All you have to do is use it as your everyday 
browser and mail/news reader. 

Report Bugs 
Reporter Tool 
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nt to use a text editor, you have the following choices: 



V A "pure" text editor such as Notepad (Windows) or BBEdit (Macintosh): 

"Pure" text editors don't add any formatting to text, so you don't have 
to worry about hidden formatting getting added to your file. Windows 
WordPad, which also comes free with Windows, is a simple word process- 
ing program, not a true text editor — use Windows Notepad instead. 

For the PC, you may want to see if you can find a freeware or shareware 
text editor with Web editing features; new ones are being created all 
the time. A good place to look is C I NET's download.com at www. 
download . com. 

is* A word processor: You can use a word processing program such as 
Windows Microsoft Word, WordPerfect, or some other full-featured word 
processor. However, you have to be sure to always save your Web page 
files as HTML files, and to add the extension . htm to the end of the file- 
name. Also, the plethora of features in your word processor can be con- 
fusing because most of them aren't supported by HTML and therefore 
don't appear in your Web page. 



When using either a word processor or a text editor, you should save your 
Web page files with the suffix . htm. When using a word processor, you addi- 
tionally have to use a pull-down menu or other option setting to tell the word 
processor to save your file as a text file — that is, with none of the normal 
word processor formatting. 

We can sum up the trade-off between using a pure text editor versus a word 
processor as the trade-off between two different kinds of convenience. A pure 
text editor never adds word processor formatting to your document — the file 
is always a text file. And the pure text editor is simple — it doesn't offer you a 
bunch of formatting options that may or may not be supported by HTML. 

A word processor, on the other hand, is familiar. You know exactly how to 
work with features such as the spell checker (which already has any words 
you've added to the dictionary), formatting, and print options. This familiar- 
ity can be a real plus when you're working with a long and complicated Web 
page file. 

Many spell checkers choke on HTML tags, so they aren't very usable for 
Web pages. Composer's spell checker works on the text that appears in 
the Web page, so it doesn't have this problem. 
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You can use either a text editor or a word processor, but our experience is 
that the text editor is a better choice. Almost every serious Web page pro we 
s a text editor for some of their work, and a full-featured Web page 
tool such as FrontPage or Dreamweaver for the rest. (And some- 
ghter tool, such as SeaMonkey Composer, for quickly trying out 
an idea.) 




If you do use your word processor for editing Web pages, you may find that it 
has an option for working directly on Web pages. In our limited experience, 
this option is more confusing than helpful. However, you may wish to try this 
option if you feel most comfortable in the word processing environment. 
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In This Chapter 

Deciding what to put in a home page 

Starting your page 

Getting your META tags right 



Creating your Web home page is a lot of fun — and may be the occasion 
for some anxiety. After all, your home page will be published on the 
World Wide Web — it's like putting something you wrote in your diary onto a 
billboard on the busiest street in town! 



Knowing what to say on your home page can be hard, but we give you some 
ideas in this chapter. Luckily, the mechanical part — creating your first Web 
page and putting it on the Web — is fairly easy. This chapter tells you how to 
create the page itself; the next chapter tells you how to add graphics. Other 
chapters tell you how to improve your page further. In Chapter 16, we tell you 
how to publish your page on the Web. 



What to Put in a Home Paqe 

Many people think the most important thing about publishing their first Web 
page is learning HTML. They may take an HTML course, or pick up a book 
like this one, and feel ready to create their first Web page. Only then do they 
find out that the real problem in creating their first Web page is knowing what 
to say! 



The "what to say" problem is easier to solve if you think of your Web page 
as a set of blocks of content. Each block covers a specific thing you want to 
describe on your Web page. For instance, a set of links relating to your hobby 
is one block of content; your resume can be another block. By figuring out 
which blocks of content you want to put up first, and then figuring out what 
to say in each block, you cut the overall problem of what to put on your Web 
page into easier-to-manage pieces. 
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Using blocks of content also helps you move smoothly from having a single 
Web page to having a multipage Web site. Your first Web page may be a long 

several blocks of content. When you're ready to move to a multipage 
as described in Chapter 15, you can take the blocks of content from 
your single home page and move several of them onto separate Web pages. 

4f/ jg\ The great thing about Web publishing is that you can always change your 
Web pages later. "Just do it" — get something up that you're at least sort of 
proud of — then continually improve your Web page as you learn more. 

You may have your own ideas for what to put on your initial home page, and 
if so, that's great. But in case you're stuck, the next few sections offer a few 
ideas to get you started. 



Me and my interests 

The easiest and most fun thing to put on your first Web page is a description 
of yourself and the things you're interested in. This type of Web page is put 
up for fun, and also works well for certain specific purposes, such as applying 
for college or online dating (meaning you then have nothing to talk about at 
that first lunch!). Figure 10-1 shows an example of this kind of personal Web 
page. 



Figure 10-1: 
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Mark Mitldlebrook 

Quamquam ndentem dicere verum quid vetat? 
("What forbids telling the truth while laughing?") 
— Horace, Satires 1 1 

I'm a rabid liberal artist in sheepish techno-geek clothing. After a brief 
fling with engineering followed by a 15-year committed relationship with 
computer consulting, I've recently developed a promiscuous working life 
which includes wine, teaching, and Web development 

I got the liberal arts religion at St John's College in Annapolis, MI) and 
Santa Fe, MM and there found an educational home for the first time - a 
place where a small community of learners takes senously the asking 
and exploring of important human questions through conversation. I 
remain involved with St. John's College through its alumni community, 
including the local alumni chapter , and by serving periodically on the 
college's Board of Visitors and Governors and the Alumni Association's 
Board of Directors. I also teach St. John's-style literature and 
philosophy seminars at St. Mary's College of California . 

After St. John's, I earned a Master's degree in structural engineering at 
the University of California, Berkeley Thus began my masquerade as 



gflljfi 



< Inleriiftl 



Chapter 10: Creating Your Home Page 



pBooks* 

or as< 



Here are some of the blocks of content you may want to include in an inter- 
ests page: 



ief description of yourself: Briefly describe yourself — name; age 
or age range; what you do; where you work, go to school, and live; and a 
bit of your personal history. 

Don't give too much detail about yourself, or you may become a victim 
of identity theft. See the sidebar, "Maintain your identity," for details. 

v 0 A photo of yourself: You can use a photo of yourself as part of your self- 
description. We tell you much more about how to get a photo of yourself 
onto the Web in Chapter 12. 

t<" A description of your interests: Your Web page may focus on one or 
two of your interests, but having a brief list of all your major interests is 
nice — this section makes someone visiting your Web page feel like they 
really know you. 

t<" A description of your work or school: Describing how you spend your 
days is an interesting part of a rounded picture of you. Include a link to 
the Web site of your company or school, if there is one. (We tell you how 
to create links in Chapter 13.) 

Favorite links, by interest: (One or more blocks.) Many people put their 
favorite links on their Web site, but the list tends to be both obvious and 
confusing — a mish-mash of things thrown together and including obvi- 
ous sites such as Yahoo! or Amazon, which almost all Web users know 
about already. Create short lists of your favorite sites on one specific 
interest at a time — and precede it with a brief description of why you 
have that interest. 

v* Detailed link descriptions: For each link you provide, give a description 
of the site and what you find valuable about it. Link to specific pages 
in the site with the best stuff, rather than just linking to the site's 
home page. 



You can create this kind of Web page as a simple, long, scrolling page with no 
navigation — just one block of content after another. For this kind of Web 
page, whether the formatting and look of the page are kind of rough around 
the edges doesn't matter — interesting content is enough to make the Web 
page stand on its own. 



Me and my family 

A popular use of a Web page is to put up photos of yourself, your spouse, 
or significant other, your kids, your pets, and other important people in 
your life. (We know pets aren't people, but many pet lovers don't.) This kind 
of Web site helps families and friends keep in touch. See Figure 10-2 for an 
example, from a husband and wife who both love travel and wine. 
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About Team Rioja 

by Mark Middlebrook 



Who m e we'? Team Rioja is a select group of 
aficionados of Spanish wine, travel, and medieval 
music. The team was formed in August 1 997 
during a medieval Spanish music workshop in 
northern Spain 



What do we do" 7 First and foremost, we drink Spanish wine — 
mostly Rioja, but also Pnorat, Ribera del Duero, Albanno, Ribeira, 
Cava, and several styles &f sherry (notably Manzanilla, Montilla, and &\ 
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Such pages can grow into fairly large Web sites as you put up additional 
pages for each family member and each birthday party or vacation that gets 
memorialized on the Web site. For your initial, simple home page, though, 
consider the following content: 



i>* A brief description of yourself and other family members: Have each 
person in the family briefly describe themselves — name, age or age 
range, work or school details, where he or she lives, and a bit of personal 
history 

See the sidebar, "Maintain your identity," for some caveats about how 
much personal information you should put on your site. 

V A photo of each person: Include a group photo or a photo of each 

person. Don't use too many photos, or photos that are too large, or your 
Web page loads very slowly. See Chapter 12 for more on photos and 
other graphics. 

Descriptions of everyone's interests: A brief list of each person's major 
interests is a nice touch on a family Web page. This section can also 
give relatives a clue as to what to get each person in the way of birthday 
and holiday gifts, without anyone being too obvious about saying what 
they want. (If you do want to be obvious, just create a Wish List on 
amazon . com, and link to it from your Web site!) 
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f A description of each person's work or school: Seeing — or being 
reminded — how each person in your family spends his weekdays is 
Include a link to the Web site of each person's company or school, 
ailable. (We tell you how to include links in Chapter 13.) 



i>* Favorite links, by person: (One block per person.) A list of each 
person's top five or seven sites gives visitors an idea of each family 
member's interests without making the page too lengthy. 



Like a personal page, a family page can be a simple, long, scrolling page with 
no navigation, and the look can be whatever you want it to be — no profes- 
sionalism needed. This kind of page is more fun the more you put into it, 
without worrying too much about appearances. 



Me and my u/ork 




You can put up a brief Web professional page describing your professional 
background and interests — kind of an illuminated resume. You can tilt this 
kind of page toward sharing your professional interests, or more narrowly 
focused on helping you get a job. 



Maintain your identity 



When creating your personal Web page, avoid 
giving out specifics that a thief can use to steal 
your identity. Another person needs surprisingly 
little personal information to fill out a credit appli- 
cation in your name and get credit while posing 
as you. The identity thief can then run up thou- 
sands of dollars of charges againstyour credit in 
a few days, all withoutyour knowledge. Cleaning 
up after this kind of attack on your credit can be 
very difficult, expensive, and time-consuming. 

The main thing to avoid is giving specific names 
and numbers: Your driver's license number, your 
Social Security number, and credit card num- 
bers are strictly off limits, which may seem obvi- 
ous. (One security expert described the Social 
Security number as the "golden key" to an 
American's identity.) But you should also avoid 
giving other numbers: Your street address and 
your personal phone number are good things to 



leave out, as are your exact age and your birth 
date. You may even want to leave these details 
off an online resume; just include your name 
and e-mail address for people to use in making 
an initial contact with you. 

Don't give a lot of details about family members, 
and specifically avoid giving your mother's 
maiden name — a bit of information that's com- 
monly used to verify identity. Staying vague about 
family members protects them as well as you. 

Be careful to avoid giving details about kids, 
especially information that can allow someone 
to identify and find a child. For instance, you 
may decide to go ahead and put your address 
and phone number on your site — butdon'talso 
include a picture of one of your kids and his or 
her name, or your kids may get the attention of 
the wrong kind of people. 



Part III: Making Web Pages Work Harder 



Some blocks of content you may want to include in a work-related page: 



DBoot^ 

vours 



ief description of yourself: As in a personal page, described in the 
ious section, a brief description of yourself is interesting. Talk about 
yourself as a human being — leave your professional interests to their 
own section. 




**" A photo of yourself?: A photo of yourself is a nice addition to a profes- 
sional site. But if you're going to be using your professional page for 
getting a job, you may want to leave the photo off. Why? Because many 
employers, concerned about discrimination issues, don't accept a resume 
with a photo in the early screening stages; they simply ignore any such 
resumes. So leave the photo off your professional site if you're actively 
looking for work. 

t<" A description of your professional interests: A professional Web page 
should list your major professional interests. You should probably leave 
personal interests for your personal site, unless you have a leadership 
role in a volunteer organization or some other work-relevant personal 
involvement. 

Favorite links, by interest: (One or more blocks.) A well-organized list 
of links to areas of professional interest to you can be impressive, and a 
real resource for others with similar interests. Create a separate list for 
each of your major areas of interest. 

i>* A formatted, printable resume: If you are considering using your pro- 
fessional site as a resource for a job hunt, or if you just want people to 
be able to see all the work experience that's summed up in your resume, 
add a formatted resume to your Web page. 



A work-related site can be a single Web page at first, but you'll probably want 
to have your resume as a separate page before too long. We describe how to 
add additional pages to your Web site in Chapter 15. And, since it's for work- 
related purposes, you won't want the site to be too ugly. See Chapter 14 for 
details on creating an attractive site. 

We suggest that you not create a Web site for your business — even a small 
business — as your first Web publishing effort. A business Web page needs to 
have an attractive look, a good balance of text and graphics, and correct 
spelling and grammar. This is a lot of requirements to meet in your first Web 
publishing effort. We suggest you create a personal Web page — either for 
yourself as an individual, for your family, or for your work interests — to 
start with. Later, you can use your newly acquired skills to tackle the tougher 
job of creating a business Web site. 
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you're ready to create your first personal Web page. How do you 
actually do it? 

Just fire up your Web page editor — whether it's a text editor or a Web page 
editing program such as Composer — and start writing. Use HTML com- 
mands, if in a text editor, or the commands that your Web page editor makes 
available to format your text as you go along. 

One way to make Web publishing easier is to separate the "what do I say" 
part from the Web publishing part. Consider creating a mock-up of your 
home page first in your favorite word processing program. Get the text right, 
insert a picture, and so on. Then, when you actually create your Web page, 
copy and paste the text from your word processing program into your Web 
page editor. 

^ji\NG/ When you bring content from a word processing program into a Web page edit- 
^/ ing program, be ready to redo your formatting — and to rewrite some of your 

text to make it more Web-friendly. Short, punchy text with lots of headings, 
bullet ed lists, and numbered lists is the recipe for easy-to-read Web writing. 




Creating your initial page, using HTML 

In this section, and the following sections, we tell you how to create your 
Web page, using HTML in a text-editing program. This allows you to really get 
to know the HTML tags by using them directly. 

In alternating sections, we describe how to do the same thing, using a Web 
page editing program such as SeaMonkey Composer. This allows you to con- 
centrate more on your content and less on the mechanics of HTML. 

The steps in this section are for Windows Notepad, but a similar process 
works for any text editor — or even for a word processing program, if you're 
careful to save the file as text, and then add . htm to the end of the filename 
to indicate that it's an HTML file. 

In this section, we describe very specifically how to get your HTML file 
started — if you do it right, life is easy, but if you make even a small mistake, 
editing and previewing your file is hard. Follow these steps to create an initial 
Web page in HTML: 
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1. Open your text-editing program. For instance, to use Windows Notepad 
as your text editor, choose StartOProgramsOAccessoriesONotepad. 



text-editing program opens a new document. 



the required header and other tags to your document: The 
<html> and </html>, <head> and </head>, <title> and </title>, 
and <body> and </body> tag pairs. 

Enter the following lines in your HTML file: 

<html> 
<head> 

<title>Bud Smith's Personal Web Page 

</title> 

</head> 

<body> 

The main content of your Web page goes in the body 
section . 

</body> 
</html> 

See Figure 10-3 for a display of these HTML tags in a Notepad document. 
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<HTML> 
<HEAD> 

<TlTLE>Bud Smith's Personal web Page 

</TITLE> 

</HEAD> 

<BODY> 

<!-The main content of your web page goes in the body section. 

.:/E:0DY> 
</HTML> 
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The main part of your Web document goes between the <body> and 
</body> tags. The tag with an exclamation point, < ! - - The main 



tent . . . — >, contains a comment. The browser ignores this tag 



f\a^its contents, and doesn't display them in your document, but using 
this tag allows you to make notes to yourself in the HTML text. 

The text between the <title> and </title> pair of tags is the title of 
the document. A Web browser displays the title in the top of the file 
window. 

3. Begin the process of saving the file by choosing FileOSave. 

The Save As dialog box opens. 

Both the Save and Save As commands open the Save As dialog box when 
you're saving a file that you haven't previously saved. 

4. Create a new folder for your Web page files. Use the pull-down file 
menu at the top of the Save As dialog box to navigate to the spot 
where you want to create your new folder. Then use the Create New 
Folder icon — the folder with the starburst on it — to create the new 
folder. Name it according to the rules in the sidebar, "How to make 
Web filenames." Then open the new folder to save your file into it. 

See the sidebar, "Files of a feather," for details on why keeping all the 
files that make up your Web page or Web site in one place is important. 

5. Use the Save as Type pull-down menu to save your file as a text 
document. 

Unless you're using Notepad, which always saves files as text, get in the 
habit of saving your HTML files as text documents. That way, even if you 
work on the file in a word processor, your file saves in text format, with- 
out any word processor formatting codes. 

6. Enter the filename you want to use, followed by the suffix . htm. For 
example, you can call the file mypage . htm. 

See the sidebar, "How to make Web filenames," for details on why it's 
important to save your file as a text file, and to end your HTML files' file- 
names with . htm. Using the . htm suffix allows you to easily open the 
file in a Web browser program to review it. 

7. Click the Save button. 

Notepad saves your file as a text document with the filename you give it, 
including the suffix . htm. 

8. To preview your Web page in a Web browser, open a browser such as 
Internet Explorer. 

Now's a good time to get in the habit of having a browser window open 
so you can check your HTML work as you go along. Every time you save 
your HTML document, you can open the saved document in your Web 
browser to see how it will look as a real Web page. 
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In your browser, choose FileOOpen to bring up the Open dialog box. 
Click the Browse button to open a dialog box that allows you to find 
file. Navigate to where your file is and click its name to select it. 
click Open. 



10. Your file opens in the browser. Figure 10-4 shows the text file and the 
browser open next to each other. Note that the title specified in the 
HTML document is shown in the Web browser's file window. 

Web page authors commonly use this way of working, with the HTML 
document and a Web browser open at the same time, to keep track of 
the changes they're making in a document. 

To see changes you're making in your HTML document, you have to save 
the HTML file and then click the Refresh or Reload button in your 
browser. Refreshing the contents of your browser makes the browser get 
a new copy of the page from the Web server — or, in this case, from your 
computer's hard disk. 



Title in HTML document 



Title displayed in Web browser 



Figure 10-4: 
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<HTHL> 
-: HEAD> 

-:TITLE>Bud smith's Personal web Page 

</TITLE> 
</HEAD> 
<BODY> 

<'-The main content of your web page goes in the bocty section. — > 

:/E;ODv 
:/HTML> 
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Using a text editor, as described in the previous section, allows you to get up 
close and personal with HTML tags. Using a Web editor such as SeaMonkey 
Composer, introduced in Chapter 9, allows you to worry less about HTML 
tags and more about your actual content. (Don't worry that you won't learn 
HTML — we have you look at the HTML-tagged text underlying your docu- 
ment frequently.) 



How to make Web filenames 



Here are a few things to keep in mind when 
naming yourfilesforthe Web: 

When you tell a Windows program to save 
yourfile as a text document, it saves just the 
actual text characters that you see on- 
screen, without any formatting commands. 
The Windows program also assigns the suffix 
. txt to the file, unless you tell it otherwise. 

The filename's suffix, which is usually 
hidden from you by Windows, helps 
Windows figure out what kinds of programs 
the file "belongs" to. When you name your 
file with the suffix .htm, it overrides the 
. txt suffix that Windows would otherwise 
assign to a file that's saved as text. 

«<" When yourfile ends in .htm, Windows rec- 
ognizes it as an HTML file. This extension 
allows you to easily open the file from a Web 
browser program such as Internet Explorer. 
By doing this, you can preview your file as 
you work on it — and, more importantly, 
other people can open your file as a Web 
page when you put it on a Web server. 

You may also see some Web pages with file- 
names ending in . html; this suffix works 
on most Web servers. However, you should 
not end the filenames of your Web pages 
with .html because some programs that 



you may use to edit your file or to transfer it 
to a Web server truncate the suffix to . htm. 
This breaks any links you have to the docu- 
ment because they refer to the file using its 
original suffix, . html. Save yourself poten- 
tial headaches and always use .htm as the 
suffix for your HTML files. 

Not putting spaces in your Web filenames 
and using only lowercase letters in the file- 
names is also important. Why? Because 
yourWeb page maybe published on a UNIX 
server, or on a server that runs an old version 
of Windows. Different servers have different 
filename rules. Only a filename with a main 
part of eight characters or less, with .htm 
as its suffix, and with no uppercase charac- 
ters, spaces, or other special characters is 
sure to stay intact and accessible when you 
publish your Web page onto a Web server. 

You should also keep your folder names all low- 
ercase, forthe same reasons. If yourfolder name 
changes when you transfer your Web page to a 
server for publication, links to the Web pages 
and graphics files in the folder can be broken. 
Nothing is more frustrating — or embarrassing, 
especially if you're creating a Web page for a 
company or other organization — than having 
your hyperlinks break when you move your Web 
site from your own machine to a Web server. 
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The steps in this section are for SeaMonkey Composer, but a similar 
process works for other Web page editors, such as Microsoft FrontPage or 
?aver. These full-featured editors have all the features of Composer, 
^gjj some, so you can follow the steps given here in the more capable 
programs. 




Follow these steps to create your initial Web page in Composer: 

1. Open Composer. First open SeaMonkey Navigator by choosing StarK> 
ProgramsOSeaMonkeyOSeaMonkey. Then choose WindowOComposer. 

SeaMonkey Composer opens with an empty window. 

After you open Composer, you can close Navigator, and Composer still 
stays open. 

2. Give your document a title by choosing FormatOPage Title and 
Properties. 

The Page Properties dialog box opens. 

3. Enter the title for your document. (A Web browser displays the title 
in the top of the file window.) Optionally, you may want to enter your 
name and a file description in the Author and Description areas. Click 
OK when you finish. 

The Author and Description fields are most useful if you're working 
with others on the same machine or on the same Web site. They help 
identify who on a team is working on a document and what each HTML 
file is for. 

4. Preview your document's HTML by choosing ViewOHTML Source 
or clicking the <HTML> Source tab at the bottom of the editing 
window. 

Your document's HTML source appears, as shown in Figure 10-5. Note 
that you have no actual content in your document, but already you have 
almost a dozen HTML tags! These tags are automatically generated by 
Composer. Don't worry, most of the work you do from here on has 
results that are directly visible in your Web page. 

Note the sets of tag pairs that are standard in any HTML document: the 

<html> and </html>, <head> and </head>, <title> and </title>, 
and <body> and </body> tag pairs. 

Also note the META tags. For a brief description of META tags, see the 
section "I Never META Tag I Didn't Like" later in this chapter. 

The main part of your Web document goes between the <body> and 
</body> tags. The tag with an exclamation point, < ! - - The main 
content . . . — >, contains a comment. The browser ignores and does 
not display this tag and its contents in your document, but the comment 
tag allows you to make notes to yourself in the HTML text. 
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_ tttil PUBLIC "-//U3C//DTD HTML 4.01 Transitional//EN" 

<html > 
<head> 

<meta content = "text/htrnl; charset=ISO-8859-l" 
http-equiv="content-type"> 
<title>Bud's page for CCTPDSlt; </title> 
<meta naine="author" content="Bud Smith"> 

<rtieta name="descr ipt ion" content="A beautiful test page for our book"> 
</head> 
<body> 
<br> 
<br> 
</body> 
</html> 
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The text between the <title> and </title> pair of tags is the title of 
the document. The Web browser in the top of the file window displays it. 
It is also likely to be used by Internet search engines to index your page 
for searching. 

Return to a normal view of your Web page by choosing ViewCNormal 
Edit Mode or by clicking the Normal tab at the bottom of the editing 
window. 

Your empty editing window appears. Note, however, that your Web 
page's title appears at the top of the editing window. 

If you don't give your document a title before you save it, Composer 
prompts you to enter a title before saving. 

Begin the process of saving the file by choosing FileOSave. 

The Save Page As dialog box opens. 

Both the Save and Save As commands open the Save Page As dialog box 
when you're saving a file that you haven't previously saved. 
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To create a new folder for your Web page files, use the pull-down file 
menu at the top of the Save Page As dialog box to navigate to the spot 
re you want to create your new folder. Then use the Create New 
er icon — the folder with the star on it — to create the new 
folder. Name it according to the rules in the sidebar, "How to make 
Web filenames." Then open the new folder to save your file into it. 

See the sidebar, "Files of a feather," for details on why keeping all the 
files that make up your Web page or Web site in one place is important. 

8. Add . htm to the end of the filename to make sure it is given the . htm 
extension and not .html. Then click the Save button. 

Composer saves your file as an HTML document. Because it has the 
suffix . htm in the filename, you can easily open the file in a Web browser 
program to review it. 



Files of a feather 



Keep all the files for your Web page, or for a 
small multipage Web site, in a single folder. The 
Web publishing process is much easier. 

i"* For a Web page: Keeping the HTML file for 
your Web page and all the images that are 
used in your Web page in a single folder is 
important. Why? Because the hyperlinks 
are much simplerif you just have to give the 
filename. If you putimagefiles in a separate 
folder, the hyperlink (see Chapter 8) has to 
name the folder and its relationship to the 
folder. Trust us: You don't need the hassle. 

There's yet another reason to keep your 
HTML file and your image files in the same 
folder. When you publish your Web page, 
you move your HTML file and the image files 
onto a different machine — the Web server 
that hosts your Web page. If you keep all 
your files together in a single folder, doing 
this transfer correctly is much easier. 

W For a multipage Web site: Hyperlinks to 
images and to other Web pages in your site 



are easier to specify, and transferring the 
site to a Web server is easier, when you 
keep all yourfiles in a single folder. 

This reasoning breaks down, though, when 
a Web site gets larger and more compli- 
cated. When you have more than a couple 
of dozen files, keeping them all in one folder 
becomes difficult to manage. At that point, 
you have to break your site into a group of 
folders, one per Web page, plus a folderfor 
shared graphics. And then you get to 
change all your hyperlinks so they work 
across the new folder hierarchy (see 
Chapter 8 for more about hyperlinks). 

You should also keep extraneous files that aren't 
part of your Web page out of your Web page's 
folder. Why? You'll most likely move these extra 
files, along with your Web page, to a Web 
server when you publish your site. And who 
needs the extra files on the Web server? 
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If you want search engines to easily find your Web page, put key information — 
like your full name, for a personal page, or your business name, for a business 
i the title, in the first heading within your document, in the first 20 or 
>r-text words of your document, and in META tags (described in the 
next section) in your document. When a spider — a program that moves across 
the Web looking at the content of pages and sites — indexes your page, it looks 
in some or all of these places, and people searching for your name or your 
business name are very likely to see your page in the search results. 



/ Netfer META laq 1 bidn't Like 

One of the most interesting, and controversial, tags in HTML is the META 
tag. That's because META tags affect how your Web page appears in search 
engines, and some people go to great lengths to have their pages rank high in 
search engine lists. The META tag is used for meta-information — information 
about your Web page, rather than information that displays in your Web page. 

The META tag is used only in the header area of your site. The header area is 
all about meta-information, so that makes sense. (The <title> tag is sup- 
posed to be meta-information, for use only by spiders, but Web browsers also 
display the title in the top of the file's window.) 

The META tag has one main purpose: To better describe your Web page to 
the spider programs that gather Web information for search engines. Some 
search engines depend heavily on the contents of META tags to decide how 
to index pages for use in search results, and to find a description of the page 
to use in the search results themselves. 

In some cases, if a user is searching for Ukrainian Frisbee teams, and the 
words in your META tag include "Ukrainian" and "Frisbee," your page comes 
up first in the search engines! Other search engines, though, largely ignore 
the content of META tags. For more on how to place your site high in search 
engine results, see Chapter 15. 

META tags consist of three pieces: The word META, a field that describes the 
content of the META tag, and the information that goes in the field. Here's the 
META tag that SeaMonkey Composer puts in all your Web pages: 

<meta http-equiv= "content-type" content= " text /html ; 
charset=ISO-8859-l"> 

Seeing this, you might say, "What a bunch of junk!" But this tag is simply three 
fields of data. The first tells a Web spider that this is a META tag. The second 
says that it's the "content-type" version of a META tag. The third says that 
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the content of this Web page is text, in HTML format; it uses the character set 
ISO-8859-1, or standard English-language ASCII characters. You can add this 
to any document you create. 




There are three other META tags you really should put in your Web page: the 
author, description, and keyword versions of the tag. Examples follow: 

<meta name=" author" content= "Bud Smith"> 

The author version of the META tag simply states who created the page. 
This tag is mostly useful for internal purposes — so someone who 
knows you, or who works in the same organization you do, knows who 
to go to with questions or comments about this particular Web page. 

<meta name=" description" content="Bud Smith's own Web 
page " > 

The description version of the META tag is simply a brief description of 
the Web page. Put this META tag in any Web page that you want to have 
show up in search results. Some search engines use the DESCRIPTION 
version of the tag as the actual description that shows up in the search 
engine listings, so write the content carefully. 

<meta name=" keyword" content="Bud Smith, Web authoring, 
Dummies, For Dummies "> 

The keyword version of the META tag is a list of keywords that you want 
search engines to associate with your page. Your results in search 
engines will be better, overall, if the keywords listed in your META tag 
are also within the title, first header, or first 20 or so ordinary words of 
your Web site. 

For additional information about META tags, check out Search Engine Watch 
at searchenginewatch . com/webmasters /meta . html. This Web site has 
the latest and greatest information about Web search engines. Its information 
about META tags is written in an understandable way, and it has a lot of other 
great search engine information as well. We also think the same applies to 
Search Engine Optimization For Dummies, Second Edition, by Peter Kent 
(Wiley). 



Adding META tags With HTML 

You can easily add META tags to your HTML document: 

1. Open your Web page in your text-editing program. 

For instance, to use Windows Notepad as your text editor, choose 
StartOProgramsOAccessoriesONotepad, and then choose FileOOpen to 
choose the file to open. 
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the author, description, and keyword META tags to your docu- 
t in the header area, between the <head> and < /head> tags: 



<meta name=" author" content^ "xxx" > 
<meta name=" description" content= "yyy" > 
<meta name=" keyword" content= " zl " , " z2" , " z3" . . .> 

Replace xxx with your name; yyy with the description of your Web page 
that you want to have appear in a search engine's results; and zl, z2, z3, 
and so on, with the keywords related to the content of your page. For a 
personal Web page, good keywords are your first name, last name, your 
full name, and keywords relating to the interests described on your page. 

3. Save your document and then exit your text-editing program. 

You can't preview this change in a Web browser because META tags 
aren't visible when you view your Web page in a browser. So simply save 
your document and exit. 



Adding META taqs u/ith Composer 

Most changes to your Web page are easier with Composer than with HTML in a 
text editor. However, because adding META tags involves adding HTML code 
directly to your document, it's actually a bit complex to do this in Composer: 

1. Open your Web page in Composer. 

Choose StartOProgramsOSeaMonkeyOSeaMonkey to start SeaMonkey 
Navigator. Then choose WindowOComposer to start Composer. Finally, 
choose FileOOpen to open your Web page file. Your Web page opens in 
Composer. 

2. Within Composer, choose FormatOPage Title and Properties. 

The Page Properties dialog box opens, as shown in Figure 10-6. 



Figure 10-6: 

Paging all 
properties. 



[New page, not saved yet] 
Unknown 



Bud's Home Page 



Page Properties 



Location: 
Last Modified: 
Title: 
Author: 
Description: 



Advanced users: 

To edit other contents of the <head> region, use "HTML 
Source" in the View Menu or Edit Mode Toolbar. 
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Enter or modify the contents of the Author and Description fields. 
Don't be afraid to write a long description, even though the dialog 
doesn't have much space for it. (You can also take this opportu- 
to modify the title of your Web page if you want.) Click OK when 
you finish. 

Composer automatically generates the author and description META 
tags for you and places them in the Header area of the HTML document 
you're creating. 

The description you enter may show up as the description of your Web 
page in the results page of a search engine. 

The good news is, that was easy. The bad news is, you're not done yet. 
You still need to enter the keywords for search engines to associate with 
your Web page, and you have to work directly in HTML to do that. 

In Composer, click the HTML Source tab, or choose ViewOHTML 
Source. 

The HTML source for your Web page appears. Note that the META tags 
for author and description are there, just as you entered them. 

Copy and paste the META tag for your Web page's description into the 
HTML source. (You should now have two identical DESCRIPTION 
lines.) In the second line, change "description" to "keyword". 
Then change the words after " content =" to the keywords you want 
to associate with your Web page for search engines. 

Editing a copy of existing HTML is often much easier than creating new 
HTML code yourself. Even the most minor typo in HTML code can cause 
big problems, so re-using existing code is often a very good starting point. 

Go back to the normal viewing mode by clicking the Normal tab, or 
by choosing ViewONormal Edit Mode. 

The content of your Web page appears, with HTML tags hidden. 
Save your document and exit Composer. 

Your Web page now has appropriate META tags — many commercially 
created Web pages don't. Congratulations! 
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In This Chapter 

Writing for the Web 
Formatting Web text 
> Using HTML lists 
Entering text in HTML 
Entering text in SeaMonkey Composer 



The previous chapter shows you how to get your Web page started. This 
chapter shows you how to put some text in it and get the text formatted 
so it looks good. 

Along the way, we also talk about how to write for the Web. Web writing is a bit 
different than other kinds of writing. It's also kind of fun, after you get used to it. 

Writing for the Web 

Every new medium develops its own style. Magazine articles are often wordy 
and literary in style. Newspaper articles are brief, to the point, and written in 
a "pyramid" style that puts the most important information first. The Web 
has its own style. Learning to use it can make your Web page much more 
interesting and effective. 



Web realities 

The new style of writing found online is based on three underlying realities 
about the Web: 

V The capabilities of HTML: HTML allows you to specify some simple text 
formatting, headings, and lists. Newer versions of HTML also allow you 
to specify fonts and specific text sizes, but a user can override these 
specifications. 



Part III: Making Web Pages Work Harder 



d Books 



What it means for you: Don't count on complicated formatting and spe- 
cific layout to get your message across. Keep it simple. 



difficulty of reading from a computer screen: A computer screen 
much lower resolution than a printed page — about 100 dpi (dots per 
inch), versus anywhere from 300 dpi on up for most print. People's eyes 
get tired when they try to read long blocks of text on-screen. Figure 1 1-1 
shows how far on-screen letters are from the smooth lines of printed text. 

What it means for you: Shy away from long blocks of text. Write small 
chunks of text, then break up what you write using headers, lists, 
quotes, and other devices. Then go through the text again and cut what 
you write down to the fewest words that do the job. 

V The ease of clicking away: One of the most fun aspects of the Web for 

users is one of the most vexing for Web publishers: Clicking away to 
another site is very, very easy. Web content is free and voluminous, so 
users are always enticed to go elsewhere. 

What it means for you: In addition to keeping your text brief and broken 
up, you need to make it as interesting as possible. Take advantage of the 
ease of clicking away: Include relevant hyperlinks in your Web text. 



To further illustrate these difficulties, Figure 1 1-2 shows a PDF file from the 
For Dummies site at www . dummies . com. It shows content from a previous 
edition of this book. It's very well laid-out online, but the amount of content 
displayed is only about half of one printed page (remember, a book reader 
sees two pages at a time). The comparison to the Web is even more unfavor- 
able for magazines or newspapers, which fit even more information on a 
printed page than a typical book does. 

The point is that the reader gets far more content for a given amount of effort 
from print than they do from online content. So when writing for the Web, you 
need to keep your text short, your layout simple, and your content interesting. 



Figure 11-1: 

Zooming in 
shows how 
"chunky" 
on-screen 
letters are. 
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Business sites 

Business Web sites, also known as commercial site*, constitute the BflfHOO 1 
pound ■ * 1 1 ! i i of the Web, with a tremendous amount of time, energy, and 
money devoted to them Business Web site? cover a wide ran^e of styles 
because their goals and the expertise and resources behind them vary so 
much This, book pmvide* enough information lor you to create a competent 
"Web presence" site with &evetal pages of contact and company informal i< <u 
But even these kinds ol sites vary quite a bit, and you need to be sure that 
your company's page is well executed 

Figuie 1-5 shows the Net*urfer home page created by Arthur Bebak. one of 
Ihe aut hors (So now you can call him "Author" Bebak!) tio surf around the 
Netsurfer site to see what a site designed and implemented by one of us 
looks like, www . netsurf .eom/nsd. 

The first question to ask about a business Web site Is "Who can access It?" 
Some rites are intended foi the World Wide Web and everyone on it; others 
are on the World Wide Web but are password-protected or otherwise 
restricted in access, still others are on private networks and inaccessible to 
oulMders The.se inaccessible network.- are described as being "behind the 
fin?w.:ill * Any Web page that isn't accessible to everyone is considered to be 
on an tnfrunet. if access is limited to .me company, or an extninet. if access is 
limited to ii ^roup of companies that are business partners 
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If you have something dense and detailed that you really want people to read, 
put it on a separate Web page and encourage people to print the page out. 
Or, put it in a PDF file that the user can download and print. (The advantage 
of a PDF file is that it preserves page layout exactly.) Printing allows users to 
carefully read the text rather than scan it, as most people tend to do with text 
on the computer screen. 



Web style 

Some characteristics of Web writing are based on physical realities. Others 
evolved because of the way the Web evolved — beginning as a network for 
rapid communication among scientists and researchers, both civilian and 
military. As a result, Web writing has a couple of other characteristics that 
are interesting: 

u* A lack of hype: In the early days of the Web, commercial use of the 
Internet was expressly forbidden — though some business activity did 
sneak in. In the early 1990s, the Internet and the Web were opened to 
commercial activity Despite this change, a calm, informative tone still 
dominates on the Web. Enthusiasm is encouraged, but hype, overly 
broad claims, and hucksterism seem odd and out of place on the Web. 
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An informal tone: Web writing, like e-mail, tends to be casual in tone — 
like writing to a friend. Formality stands out like a sore thumb, but so 
too much cuteness. The Web is a "cool" and informative medium, 
re 1 1-3 shows a page from Netsurfer Digest, published by Arthur 
Bebak, one of the authors of this book. It's cool, low key, informal, and 
informative. 

f A need for correctness and accuracy: Informal doesn't mean inaccu- 
rate. It's true that early use of the Web was partly a way of connecting 
friends — people in the scientific and military communities who knew 
each other from school, through conferences, and via e-mail. However, 
they were highly educated and extremely literate friends. You need to be 
accurate in order to show people that you're one of the voices on the 
Web worth listening to. 



Hai/e fun 

Writing for the Web is actually fun, once you start to get used to it. You can 
be informal, and you don't need to go on and on to belabor every obscure 
point you're trying to make. Just make your point, perhaps add links to a 
couple of Web sites that give relevant facts or support what you're trying to 
say, and move on. 
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Digest Letters 
Digest Search 
Digest Credits 



NETSURFER DIGEST 

More Signal, Less Noise 




Welcome! Netsurfer Digest is an e-zine bringing cyberspace directly to 
-your mailbox since 1994. Subscribe and every week we will bring you a 
I hot-linked HTML gateway to a selection of neat online sites. 

I Subscribe Here 

I Free SAMPLE ISSUES are available. 
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- : Done 



Latest Issue: 03/26/04: Vol. 10, ^12 
BREAKING SURF 

I Problems in Namespace 

James Gleick, an able author of books on science and scientists, has written an article about 
problems in namespace for the New York more. . 
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^^^^l^^c^^iWoncerting things about Web 
page editing when you work directly in HTML is 
the way HTML handles carriage returns and line 
breaks. 

We're all used to pressing the Enter or Return 
key when we want to create a line break in a 
word processing document or an e-mail mes- 
sage. If we want more blank space, we just 
press Enter or Return more times. However, it 
doesn't work that way when you're creating a 
Web page. 

First is the issue of getting a carriage return into 
your document when you're working directly in 
HTML. (SeaMonkey Composer and other Web 
page editors handle this problem for you.) When 
you press Enter or Return when entering text in 
HTML, HTML doesn't notice the end-of-para- 
graph marker that gets placed in the text. So, if 
you enter several paragraphs of text, pressing 
Enter or Return after each, you just end up with 
one big blob of text in your Web browser. 

What's the solution? When working directly in 
HTML, you have to insert a <p> tag at the start 
of each paragraph and a </p> at the end. 



Many unhappy Returns? 



Every time HTML sees a new <p> tag, it starts 
a new paragraph. (The </p> tag at the end of 
the paragraph isn't strictly necessary, but it's 
better to be safe than sorry.) 

So if you need more white space between para- 
graphs, you just add a few more <p> tags, 
right? Well, no. Different browsers handle mul- 
tiple <p> tags differently, but most ignore all 
<p> tags after the first one; no matter how 
many <p> tags you put in, you just get one 
paragraph break. 

The same goesforthe <br>, or break, tag. The 
<br> tag creates a line break without starting 
a whole new paragraph. This can be useful 
when you're working in a list, for instance, and 
want to insert a line break without starting a 
whole new paragraph, which may be indented 
differently. 

The solution is to insert a special character 
called a non-breaking space in each blank line 
you want. The tag for a non-breaking space is 
#nbsp; . Just put this tag after a <br> tag 
and, in most versions of the major browsers, you 
get a full line break. 



Do check over what you've written before you publish it, though. People will 
feel like you're wasting their time if you don't make sure your spelling is cor- 
rect, your grammar is passable, and your facts are accurate. (If you're not 
sure of your information on a given point, just say so.) 



Formatting Web Text 

The mechanics of formatting Web text are actually pretty simple. Later in this 
section, we show you how to use these capabilities when using a text editor — 
working with HTML directly — or using a Web page editor such as SeaMonkey 
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Composer. First, here's a brief list of the text capabilities available for Web 
publishers, based on the HTML tags found in the most widely used versions 



Headings: You can specify six levels of headings in HTML, using the tag 
pairs <hl> and </hl> for the largest, top-level heading; <h2> and </h2> 
for the next level; and so on down to <h6> and </h6>, the lowest level of 
headings. 

What it means for you: The ideal way to use headings is as intended — 
<hl> for the most important heading and so on, down to <h6>. 
However, you may notice the heading you're using seems too large in 
comparison to the text beneath it. Many people use <h4>, for instance, 
for a second-level heading, or use text size commands and holding to 
create their own header styles. Try using the intended headings first, 
and then use your own formatting if you really need a specific look. 

Font sizes: HTML allows you to specify font sizes that are larger or smaller 
than medium, or standard, size. You can go two sizes smaller or three 
sizes larger than medium. This formatting works even if users specify a 
font size or style in their browser setup or in Windows. (As people get 
older, and their eyes weaken, they resort to various tricks to make using 
the computer easier — as one of the authors knows from experience.) 

What it means for you: You don't want your Web page to look like a 
hostage note, with all different styles and sizes of text mixed up, but 
font sizes can be a good way to make a point (with a larger font size) 
or fit a lot of text into a small space (with a smaller size). Using relative 
font sizes is one of the few formatting tricks that almost always work 
well in different Web browsers. 

Character formatting: You can make text bold or italic using the <b> 
and </k» tags to start and stop bold and the <i> and </i> tags to start 
and stop italic. You can also underline text, but we don't recommend it, 
because users can easily get confused — because HTML links are usu- 
ally underlined. 

What it means for you: You should feel free to use bold and italic to 
emphasize your point, but don't overdo it. Structured use of bold and 
italic, such as the bold used to highlight items in this list, is one good 
solution. As for underlining, avoid using it on the Web — people confuse 
it with the underlining (and use of a color, usually blue) used for hyper- 
links. See the "What color is your hyperlink?" sidebar for details. 

u 0 Advanced character formatting: Using tags that aren't supported by all 
browsers currently in use, you can specify the fonts used in your Web 
page, as well as font colors. There are problems with doing this, though. 
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Some users have older browsers that don't support this kind of format- 
ting. And some folks have their browsers set to use specific fonts, 
rdless of what you specify. Yet others have specified large fonts 
indows, which make some parts of your Web look much different 
than you intended. 



What it means for you: We don't recommend using advanced character 
formatting because it's complicated and because, just when you start to 
depend on it, you find it doesn't work for some of your users. Using font 
and link colors can cause problems because users are accustomed to 
seeing only standard colors used for text and for links. Stay away from 
this kind of formatting unless you're working at a professional level, with 
the design help and testing resources needed to make it work well for all 
your users. 

Figure 1 1-4 shows these options for Web text formatting in a single example. 
Use it as a resource when deciding what formatting to use in your own 
Web page. 



* Bud's page for CWPDc - Composer 
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<<DOCTYPE html PUBLIC "-//U3C//DTD HTML 4.01 Transitional//EN" 

Heading 1 - Major Site Title 

Heading 2 - Page Title 
Heading 3 - Infra-page title 

Heading 4 - Lesser title 
Heading 5 - Small title 



Heading 6 - Veiy small title 

x-otnH - The tiniest foul 

small - Still pretty tiny 

medium - showing bold, italic and underline 



large - One step up from me drum 

x-large - Getting big 
xx-large - Really bis 



If you specify fonts, stick to common fonts such as Times, Courie r, and either HGlvetica or Arial 
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What color is your hyperlink? 



'aUTJWs-yOino use colored text on your 
Web page. We generally don't recommend this. 

Why not? (This book is about all the things you 
can do on a Web page, after all!) The reason is 
that people are very used to monotone text, usu- 
ally black, on a contrasting background. People 
have adjusted to the use of colored text on Web 
pages, but mainly in the form of standard hyper- 
link colors: blue for a linkthe user hasn't clicked 
yet, and purple for a recently visited link. 

Some Web page authors customize hyperlink 
colors to fit better with the color scheme of their 
Web pages. The problem is, research into making 



Web pages easier to use and less confusing has 
found that users subconsciously count on blue 
underlined text to indicated unvisited links and 
purple underlined text to indicate visited links. 
Any change in these colors, or any use of under- 
lining or blue or purple text for other purposes, 
causes deep confusion. 

So we recommend that you don't use colored 
text, don't change link colors, and don't use 
underlining except in links. The people who visit 
your Web page will have a better time using it 
as a result. 



Usinq HTML Lists 

People really like lists. David Letterman's Top Ten lists are the highlight of his 
Late Night show and have been the subject of several books. Everywhere you 
look, you see lists. Here are our top three reasons why lists are a good thing — 
in a list, of course: 

t<" Lists are interesting to look at. Web pros are always telling people to 
use lots of white space to vary the appearance of their pages so they're 
not just featureless blobs of text. Lists do this; they break up text. 

u* Lists are easy to scan. As we mention earlier in this chapter, people are 
more likely to scan text on the Web than to read it carefully. Lists are 
very easy to scan. With the key points highlighted, people can go in 
depth by carefully reading the points that interest them, and then skim 
the ones that don't. 

Lists make the writer get to the point. When you write a list, you have 
to cut and condense what you're trying to say. You may end up editing 
a page of boring, monotonous text down to three or four points in a 
half-page bulleted list. All this extra work you have to do greatly benefits 
the reader, especially the reader who's reading from a computer screen. 
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HTML and Web page editing programs based on HTML (such as SeaMonkey 
Composer) offer three kinds of lists, but only two are used much. 



eted lists: Bulleted lists are by far the most widely used kind of list 
orTthe Web. And why not? Bulleted lists are flexible and fun, both to 
write and, more importantly, to read. You start a bulleted list with the 
<ul> tag, which stands for unordered list. You end it with the </ul> 
tag. Each list item is preceded with < 1 i > , which stands for — you 
guessed it — list item. 

List items don't have to have an ending tag, though you can add one 
(it's </li>, as you might expect). After your text, the browser expects 
to see either another <li> tag, for the next list item, or the </ul> tag 
to end the list. 

What it means for you: You can convert many, or even most, long blocks 
of text into a bulleted list — and make the text shorter, easier to read, 
and more interesting in the bargain. If you have to move existing text to 
the Web, consider "bulletizing" parts of it as a quick way to make it more 
Web friendly. 

Numbered lists: Numbered lists look weird when you create them in 
some Web editing programs — the program puts a number symbol (#) 
next to each item, and the number isn't assigned until the page dis- 
plays. (SeaMonkey Composer, fortunately, displays actual numbers.) 
Numbered lists are very useful, but are found much less often on the 
Web. Numbered lists begin with <ol> for ordered list, end with </ol>, 
and — like bulleted lists — use the <li> tag to mark the beginning of 
each list item. 

What it means for you: Anytime you have a list that has an order in terms 
of importance, sequence in time, or any other reason, make it a num- 
bered list. Putting your list items in numbered order makes the list even 
easier to scan than a regular, bulleted list. 

Definition lists: Definition lists give a term and then a definition for the 
term. They're rarely used, though finding a use for them in your Web 
page is a good exercise. A definition list starts with <dl> and ends with 
</dl>. Each term is preceded by <dt>, for definition term, and each 
definition is preceded by <dd>, for definition data. Again, if you'd like, 
you can close the tags by adding </dt> and </dd>, respectively, after 
the data. 

What it means for you: The appearance of definition lists in your Web 
page is a bit funny — some Web browsers put the term on one line and 
then the definition, indented farther in, on the next line. You can help 
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the reader who's scanning easily find the terms by making them bold, 
as in the list you're reading here. People like definition-type lists, but not 
k essarily formatted the way most Web browsers do it. Use definition 
where you can, or use bold and bulleted or numbered lists to create 
your own definition-type list. 



Lists within lists: You can insert or nest one list inside another. The 
nested list can be the same kind of list, or a different kind, than the list 
that contains it. 

What it means for you: Users have a hard time keeping track of where 
they are in the overall list if you start throwing sublists at them as well. 
We believe that putting one list within another is usually a case of some- 
thing that's technically possible, but not editorially desirable. (We look 
forward to one of you proving us wrong by coming up with a good use 
for nested lists.) 

Figure 11-5 shows different list options. Pick and choose the right ones for 
you when creating your Web pages. 



Figure 11-5: 

List all your 
options and 
then choose 
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1 Thefirstmostimportantthinc 
2. The second 
3 The third 
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♦ Numbered lists are importar 
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Using a definition list shows you 
Term: Bulleted list 
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<html> 
<head> 

<meta http-equiv= "content- type" 
content = "text/ html; charset= 150-8859-1 "> 

<title>Bud' s Home Page</title> 
</head> 
<body> 

<span style="f ont-f amily : helvetica, atrial, sans-ser if ; "xspan 

style="f ont-weight : bold; ">Numbered lists </span>show normal 
sequences . <br> 
</span> 
<ol> 

-CliXspan style="f ont-f amily : 
helvetica, arial, sans-serif; ">The f ir</spanXspan 

style="f ont-f amily : helvetica, arial, sans-serif; ">st most 
important 
thing</spanX/ li> 

-CliXspan style="f ont-f amily : 
he lvetica, arial, sans-ser if ; ">The second</ spanX/ li> 

<liXspan style="f ont-f amily : 
helvetica, arial, sans-serif; ">The third</span></ li> 
</ol> 

<span style="f ont-f amily : helvetica, arial, sans-serif; "xspan 
style="f ont-weight : bold; ">Bulleted lists </span>3how items 
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key Composer or a free trial package? 



nthOTghTmerings'^hange with time, you can 
usually get a free trial version of excellent Web 
page editing software such as Microsoft 
FrontPage or Macromedia Dreamweaver from 
the companies' Web sites or an online down- 
load site such as C|NET's download.com (at 
www.download.com, natch). Why use 
Composer instead of a free trial version? 

Truly free: Composer is truly free for as long 
as you want to use it. You don't need to 
worry about paying someone money when 
your trial version expires, which is usually 
just when you're getting going as a Web 
publisher. 

Truly easy: Because it's designed as an 
introductory program. Composer has only 
basic features — not too much complexity, 
which you don't need most of the time, to 
make things confusing. 

i"* Truly HTML-compatible: As an introductory 
program. Composer only supports features 
that work on just about any Web browser 
out there. By contrast, using all the features 
in FrontPage or Dreamweaver often means 
you add things that don't work in older 
browsers or within AOL or CompuServe. 

And, of course, our argument is that you can 
better follow along with the instructions in this 



book if you're using the software that we use for 
many of our examples and figures — either 
straight HTML or SeaMonkey Composer. 

If you're sure that you're going to be using 
FrontPage or Dreamweaver soon, or if you 
already have a copy, you may want to use atrial 
version of the program that's in your future. Even 
then, you may want to use Composer for easy 
work and the full-featured program for advanced 
features. If you do work in a full-featured Web 
page editor, most of the steps in the sections of 
this book dedicated to Composer still work for 
you — you just need to substitute the specific 
commands for your program in place of the 
instructions and illustrations for Composer. 

FrontPage has a "gotcha" that has caught many 
an unwary Web author by surprise. Some of the 
features supported in FrontPage are not truly 
part of the Web butare FrontPage extensions — 
features that are only supported if the Web 
server that hosts the page is running special 
Microsoft server software, and has support for 
these features turned on! We don't want you to 
get stuck into specifying such a server, so we 
suggest you avoid FrontPage if you can — or if 
not, be careful about using features of FrontPage 
that aren't described among the "pure" Webfea- 
tures described in this book. 



Entering Text in HTML 



Entering text directly in HTML is a challenge at first because you have to 
spend a lot of time thinking about HTML tags instead of about what you want 
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to say. After a while, though, you get used to it, and working with the HTML 
tags — while still tedious — becomes routine. The good news is that working 
gives you hands-on control of what your HTML is doing. 



This section shows you how to use HTML to accomplish the following simple 
Web authoring tasks and fill in your initial Web page: 

V Enter some text. 
v 0 Format the text. 

Make some of the text into a list. 
Check out how the text looks in a Web browser. 

The rest of this section shows you how to accomplish these tasks with HTML 
in a text-editing program; in the next section, we show you how to accom- 
plish the same tasks with SeaMonkey Composer. 



Entering and formatting text 

The best way to get used to working with HTML is to jump right in: 

1. Open or create an HTML document in a text editor. Give your docu- 
ment a title and then add META tags, as described in Chapter 10. 

2. In the editing window, enter some text. 

The example in this chapter's figures includes the following text: 

I just got a new portable computer. 
I'm extremely happy with it. 
My favorite things about it are: 
1.4 GHz Intel Centrino processor 
3 0GB hard disk 

256MB of RAM (I wish it had 512MB though) 

It's much faster than my old portable computer. 

3. Start by surrounding lines of regular text with the paragraph tags 
(<p> and < /p>). 

In the sample text, we placed the paragraph tags before and after the 
first three lines and the last line. 

4. Find the text that you want to format. 

In the sample text, we selected "extremely" in the phrase "extremely 
happy." 
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5. Put formatting tags, such as <b> and </b> or <i> and </i>, around 
the text to format it. 



tags appear around the text. It shows up as formatted when you 
at it in a Web browser. In the sample text, we made the word 
"extremely" bold. (That's "we took the word 'extremely' and made it 
bold," not "we made the word so bold you can't even believe it.") 

Be sure to apply the closing tag, where one is needed, for each new tag 
you start. 



Making a list 

Making text into a list works in much the same way as applying paragraph 
formats, such as Heading 1, but you have to work with several lines at once: 

1. Identify the lines of text that you want to make into a list. 

In the sample text, we make a list out of the lines about processor, disk, 
and RAM. 

2. Surround the selected lines with the <ul> and </ul> tags for a bulleted 
list, or the <ol> and </ol> tags for a numbered list. 

3. Precede each item in the list with the tag <li> to identify it as a list 
item. 

Here's how the example looks now: 

<p>I just got a new portable computer . </p> 
<p>I'm <b>extremely</b> happy with it.</p> 
<p>My favorite things about it are:</p> 
<ul> 

<li>1.4 GHz Intel Centrino processor 
<li>30GB hard disk 

<li>256MB of RAM (I wish it had 512MB though) 

</ul> 

<p>It's much faster than my old portable computer . </p> 
The text immediately appears as a list. 

See Figure 1 1-6 to see how the screen appears at this point in the example. 

For more on HTML terms, such as "numbered list" or "bulleted list," see 
Chapter 8 for HTML basics, and the sections earlier in this chapter for 
details about when to use which kind of list. 
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just got a new portable computer . </p> 
^xtreme1y</B> happy with 1t. </P> 
Myw^write things about it are:</p> 



<UL> 

<LI>1.4 GHz Pentium MMXlntel centrino processor 
<LI>30GB hard disk 

<LI>256MB of RAM (I wish it had 256MB 512MB though) 

</UL> 

<P>It's much faster than my oid portable computer, </p> 



Figure 11-6: 

Use tags to 
get your list 
right. 



Looking at the Web page 

When working in a text document using HTML, which allows you to be con- 
stantly reminded of the HTML tags you're using, being reminded of what the 
actual Web page will look like is useful. Here's how to keep an eye on what 
your final Web page will look like as you work in HTML: 

1. Choose FileOSave to save your document. 

2. Open a Web browser, such as Internet Explorer. 

3. Choose FileOOpen in your browser to open a file. In the Open dialog 
box, navigate to your saved file, and select it. Click Open to open the 
document. 

Your Web document appears in the browser window as a Web page. 

4. In your text editor, make a visible change in your text. 
Try adding a new sentence, with or without formatting. 

5. Save the file. 

If you don't save the file to your hard disk, you can't see the changes 
when you look at it in your browser. 
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6. Click the Refresh or Reload button in your Web browser. 

The updated Web page appears in your browser. 



done, save your document and exit Windows Notepad or the 
other text editor you're using. 



Entering Text in SeaMonkey Composer 

Filling in your initial Web page with SeaMonkey Composer is fun because you 
can easily do most of the things that you may want to do with a Web page, 
though Composer doesn't let you do much beyond the basics. As you experi- 
ment with Composer, you'll find that you can use all the basic text features of 
HTML, without having to worry about HTML tags. 

This section shows you how to accomplish the following simple Web author- 
ing tasks and fill in your initial Web page: 



Enter some text. 
W Format the text. 

Make some of the text into a list, 
f" Look at the underlying HTML-tagged text. 



This section shows you how to accomplish these tasks with SeaMonkey 
Composer; in the previous section, we show you how to accomplish the same 
tasks with HTML tags in a text editor. 




See Chapter 9 for information about how to get SeaMonkey Composer, and 
Chapter 10 for information about how to create your initial Web page in 
Composer. 

You can learn HTML quite quickly by working in Composer and then clicking 
the HTML Source tab periodically to see the actual HTML tags that Composer 
puts into the HTML-tagged text that makes up your Web page. 



Entering and formatting text 

Editing text for Web pages by using SeaMonkey Composer is easy and fun 
because you can use the formatting options that are allowed on Web pages — 
and only those options. That means you're instantly seeing just about the 
same thing your Web page visitors see — and not wasting your time with 
options that don't translate to the Web. Follow these steps to type and format 
some text: 
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1. Open or create a Web document and give it a title. Then add META 
tags, as described in Chapter 10. 

e in the heading that you want at the top of your Web page. 

For example, we entered Sierra Soccer Club as the first heading. 

3. Move the cursor to the same line as the heading text. (You don't need 
to select the text.) 

4. From the far-left pull-down menu, choose Heading 1. 

The heading text reformats into Heading 1 style. 

Any HTML styles — paragraph-level formatting commands — that you 
choose affect the entire paragraph of text in which the cursor rests. 

5. Move the cursor to a new line. 

6. Type some text introducing your Web page. 

When someone searches for your Web page by using a search engine, 
the search engine may display the Web page title, as described in 
Chapter 10, and the first few words that appear in the document. So 
make the first few sentences of text that follow the title an introduction 
to the entire page or Web site. 

In the document we created for this chapter, we typed: 

Sierra Soccer Club is a boys ' soccer club that practices 
and plays at the highest altitude of any in the United 
States. If you meet the following qualifications, you 
may be eligible to become a member of Sierra Soccer 
Club: 

Born in 1993 or 1994. Sierra Soccer Club has played 
together since its founding members were 5 and 6 years 
old and will stick together as they grow up. All our 
club members must be born in 1993 or 1994. 
Some soccer experience. If you have played in organized 
leagues before, or if you're a skilled school player, 
we may be able to help take your game to new levels . 
Good academic record. We are proud that our club members 
maintain good standing in school as well as in soccer. 

7. Highlight any text that you want to format. 

In our document, we highlighted the words Sierra Soccer Club at the 
beginning of the first sentence. 

8. Click the button for the formatting style that you want: the B button 
for Bold, the I button for Italic, or the U button for Underline. 

In our example, we made Sierra Soccer Club bold. The highlighted text 
takes on the formatting you choose. 
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Making a list 



g items into a list works in much the same way as applying para- 
rmats, such as Heading 1. Just select the lines of text and then pick 
the effect that you want: 

1. Highlight the lines that you want to make into a list. 

In our document, we highlighted the lines that begin: 

Born in 1993 or 1994 
Some soccer experience 
Good academic record 

2. From the pull-down menu, choose the list style that you want: Bulleted 
List or Numbered List. 

The text instantly reformats into the list style that you choose, as shown 
in Figure 11-7. 

For more on HTML terms, such as numbered list or bulleted list, see Chapter 8 
for HTML basics, and the sections earlier in this chapter for details about when 
to use which kind of list. 
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Sierra Soccer Club is a boys' soccer club that practices and plays at the highest altitude of any in the United States. If you meet 
the following qualifications, you may be eligible to become a member of Sierra Soccer Club: 




♦ Bom in 1993 or 1994. Sierra Soccer Club has played together since its founding members were 5 and 6 years old, and wit 
stick together as they grow up. All our club members must be bom in 1993 or 1994 

♦ Some soccer experience. If you have played in organized leagues before, or if you're a skilled school player, we may be 
able to help take your game to new levels. 

♦ Good academic record. We are proud that our club members maintain good standing in school as well as in soccer. 


Figure 11-7: 
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.rking in a WYSIWYG (What You See Is What You Get) tool such as 
ey Composer, you often want to look at the underlying HTML code. 
Doing so enables you to find out how HTML works and gives you the chance 
to make adjustments in the HTML tags that affect the way your page looks 
and works on the Web. Here's how to check out your page's HTML code in 
Composer: 

1. Choose ViewOHTML Source, or click the HTML Source tab at the 
bottom of the window. 

The HTML source for your page appears. 

2. Make any changes that you want in the HTML. 

You can change the HTML directly — the changes are reflected when 
you go back to normal editing mode. 

3. Choose ViewONormal Edit Mode, or click the Normal tab at the 
bottom of the window. 

The Composer window displays the formatted Web page, reflecting any 
changes you made in the HTML code that cause visible differences in 
your Web page. 

4. Save your document and exit Composer. 
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In This Chapter 

Using graphics 

Making the most of graphics using HTML 
Creating advanced graphics 
Adjusting graphics size 
Flowing text around graphics 
Putting a border around a graphic 
Placing a graphic in SeaMonkey Composer 
Placing a graphic in HTML 



Slaving graphics as part of the Web seems like an obvious winner now — 
¥ w after all, magazines and newspapers wouldn't work well if you took 
away photographs, drawings, and all the little graphical page design elements 
that give each publication its own "look." In fact, including graphics in your 
Web pages is such a winning strategy that one of the authors of this book 
(Bud Smith) has coauthored, with Peter Frazier, a companion volume to this 
one, Creating Web Graphics For Dummies (Wiley). You can refer to that book if 
you need more graphics-related details than you find here. 

In the 1980s and '90s, before the Web, the Internet was almost entirely a text- 
only world. E-mail, Usenet newsgroups, and online service forums were all 
text-only environments, running mostly on text-only computer systems like 
UNIX and DOS. 



Graphics made the Web take off — and they are also the most difficult aspect 
of getting your Web pages right. You can use graphics to convey a thematic 
"look and feel," to accent certain portions of a Web page, or even to convey 
the main content of a Web site. Some use of graphics is necessary for just 
about any site. 

In this chapter, we look at the nitty-gritty of using graphics and explain how 
to create the most common graphic special effects. 

When you start getting your Web page to look good, though, you have to 
worry about not just the image itself, but about how it's placed on the page. 
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In this chapter, we also show you how to make your graphics work well 
within your Web page by adjusting the size of the image; by flowing text 

around the graphic; and by putting a border around the graphic, 
how you how to actually implement the changes in HTML and in 
SeaMonkey Composer. Composer is introduced in Chapter 9. 




To succeed in the somewhat complex task of adding graphics to your Web 
pages, you need to know some basics of HTML and of Web pages in general. 
Create your basic Web page by using the information in previous chapters 
before trying to add any graphics but the simplest. And if you aren't yet famil- 
iar with HTML tags, review Chapter 8 before reading this chapter. 



Using Graphics in \lour Web Site 

Graphic images take up a lot of space on a computer's hard disk. (See the 
sidebar, "Text space versus graphics space," for details about why this is so.) 
And when graphic images are part of a Web page, they take a long time to be 
sent from the Web server to your computer over the Internet, especially if 
users are browsing your site with a dial-up modem. 

Because you can't control the speed of users' Internet connection, the best 
way to make graphics show up faster for everyone is to use images that have 
small file sizes. You have two ways to do this. The first way is to use images 
that are small in display size — that is, in the amount of size they take up 
onscreen. The second is to use images that are small in file size — that is, 
that have been compressed to reduce the number of bytes needed to store 
the image. 

You can use two kinds of compressed images in your Web pages: GIF and 
JPEG images. The next section explains these two kinds of images and how to 
use them. 



Using GIF and JPEG graphics formats 

A graphics program saves files in its own proprietary graphics format — the 
specific arrangement of data that the program uses to save its files. For 
instance, the popular graphics program Photoshop saves files in the PSD 
format (for Photoshop Document); Paint Shop Pro, another popular graphics 
program, saves its files as PSP files. (You guess what "psp" stands for!) Web 
browsers typically don't know how to display files stored in these formats. 
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Text files are much more efficient for computers 
to store and transmit across the network than 
graphics files. Why? Text is very tightly coded; 
you can fill a typical Web page with solid text 
using about 1,500 characters, which can be rep- 
resented in 1,500 bytes, or 1.5KB, of space. 
Graphics, on the other hand, require a lot of 
storage. Every graphic has many pixels, and 
each pixel contains information about the color 
levels of three colors — red, green, and blue. 

An uncompressed full-page, full-color image 
takes up about 1.5MB of space — roughly 1,000 
times more space than text. Some images of the 
same display size take up even more disk 
space, up to dozens of megabytes!!). 

Large files take a long time to transmit over the 
Internet, making the Web page take a long time 



to download. So most Web pages are made up 
of lots of text, fairly large areas of white space, 
and small, highly compressed graphics. A Web 
page made up of only a 2K HTML file takes 
about 1 second to download over a modem, but 
is boring. An uncompressed full-page, full-color 
graphic takes about 12 minutes, which is way 
too long. 

In order to transmit quickly, the best Web graph- 
ics are small in size and then compressed even 
further — mainly by using fewer colors. Graphics 
packages such as Adobe Photoshop allow you 
to save images in a compressed format, with a 
smaller number of colors used to convey almost 
all of the original image. That's why some Web 
images are too small for the purpose and have 
"jaggies" — visibly rough edges. 



Fortunately, for the purposes of using graphics in HTML, you need to concern 
yourself with only two formats for graphics files, GIF and JPEG — and even 
then you don't really need to know a lot about the gory details of these for- 
mats to use them. 



GIF, or Graphics Interchange Format, is the file format used by most 
people to exchange most graphics that aren't photographs. Originally 
made popular by CompuServe, GIF spread to other online services and 
then to the rest of the Internet, including the Web. Any browser that sup- 
ports graphics supports GIF. 

GIF images may contain up to 256 colors, so GIF formatting works effec- 
tively for images that have anywhere from a few colors to a few hundred 
colors. Most simple images and many images created on a computer fall 
into this category. If an image has more than 256 colors, it loses some 
color information when you convert the image to GIF. You have to look 
at the image before and after you convert it to GIF to see if the conver- 
sion noticeably affects the image's appearance. 
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v 0 JPEG, or Joint Photographic Experts Group format, compresses complex 
images, such as photographs, with many color variations. This capabil- 
akes JPEG the image format of choice for displaying photographs 
other natural-looking images on your Web page. (What makes the 
image look natural is that it mimics the way different shades of a color 
appear as light falls differently on various parts of an object.) These 



images retain their appearance well when compressed with JPEG. 



Figure 12-1 shows a Web page from the NASA Web site to graphically illus- 
trate (pun intended) the difference in GIF and JPEG photo file sizes. Another 
site you may find useful shows various versions of the same photo of Marc 
Andreessen, one of the founders of Netscape, to illustrate the various file 
types and compression options. Here's the URL: 

cgi . netscape . com/assist/net_sites/impact_docs/e- j peg .html 




Use this GIF/JPEG test page to test the speed of your own Internet connec- 
tion. The total size of the page with graphics is about 70K. 

For images with lots of large blocks of solid color, GIF file sizes tend to be 
small. Thus, most people prefer GIFs for banners or images with large areas 
of solid color, such as bar graphs or icons. In other words, the simple draw- 
ings that most of us create work best with GIF. Dense artistic graphics and 
photos work better with JPEG. 



Figure 12-1: 

Get an idea 
of how 
different 
graphic file 
formats 
look. 
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However, there are times when choosing a GIF format for a photo is a good 
idea. The GIF format gives you some Web page display options that you don't 
k et with JPEG files. For example, you can make the colors around GIF 
ansparent to whatever is in the background of the image, and you 
can save GIF images in interlaced format. Images saved in this way, and then 
downloaded by a browser, first appear at a very low resolution, and then in 
progressively clearer resolution, until the whole image appears. This feature 
makes GIF images preferable for quickly displaying a rough-looking graphic 
that improves with time and for creating fancy special effects. 

Transparent images have a clear area surrounding the object of interest. For 
example, in a photo of a watch, you may not want any background color sur- 
rounding the watch, just the watch itself seeming to sit directly on the Web 
page. To achieve this effect, you use a transparent GIF, an image with a clear 
border area. The background color of the overall Web page shows through 
the transparent area, and the object of interest appears to "float" over the 
background. (We explain both interlaced and transparent GIF images in more 
detail, with pictures, later in this chapter.) 

In some cases, the advantages of using GIF for photos outweigh the smaller 
file sizes that are more typical of JPEG. Use GIF if you need its special fea- 
tures; use JPEG the rest of the time. As you feel more confident in your design 
skills, you can play around with both formats and choose the one that's right 
for each photographic image. Read on to find out how to obtain and create 
graphics for your Web pages and how to save your graphics in either format. 

Newer versions of JPEG that support GIF-like features are now available. 
However, not as many graphics tools or as many browsers support these new 
JPEG features as support GIF. Stick with GIF for these features until your 
expertise grows. 



Standards for graphics 



Any up-to-date Web browser can display three 
types of data: text with HTML tags, GIF graph- 
ics, and JPEG graphics. (Some people pro- 
nounce GIF as "jiff," others as "giff" as in "gift." 
We prefer "giff" as in "gift.") A typical Web 
browser displays HTML-tagged text appropri- 
ately, although not all browsers understand all 
the same tags. A browser also displays GIF and 
JPEG graphics inline — that is, embedded 
within the Web page. A Web page with inline 



graphics looks like a page in a magazine, with 
text and images mixed seamlessly together. 
However, each graphics file is stored separately 
from the HTML-tagged text that makes up the 
underlying Web page. This makes the Web 
work better overall, but contributes to some of 
the problems — such as the difficulty of keeping 
all your Web files together for proper display — 
that we describe later in this chapter. 
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Using Web-safe colors 



our Web page look good on all the computers out there is a big 
e of the trickiest things that you need to concern yourself with is the 
issue of Web-safe colors. 



Some computer users have display systems that only allow what's called an 
8-bit color display, which supports 256 colors, at a fixed resolution, such as 
800 x 600. Almost all Windows and Macintosh computer systems in use today 
support this relatively low resolution and basic palette of colors. 

Other computers have more options. They can display thousands or even 
millions of colors. And they can display the computer desktop in higher 
resolution — 1024 x 768 and, increasingly, 1280 x 1024 are fairly common. 
Some computers support even higher resolutions. Usually, though, going to 
higher resolutions means you lose the choice of displaying as many colors 
at once as when you use lower resolutions. 

However, even these more capable systems can also run at 256 colors and 
800 x 600 resolution — and they run fastest in this mode. So, some users run 
at 256 colors and either 800 x 600 resolution or 1024 x 768 resolution for good 
performance. Also, some programs, such as games, force the computer into 
one of these setups, and don't tell the user they're doing so. Nor do they 
restore the previous setting when the user goes back to Windows. So, with- 
out being aware of it, users may be running in lower resolution, and with 
fewer colors, than their computer is capable of running. 

To make sure your graphics will look good for all your users, they have to 
look good on a system running only 256 colors. Making matters worse, the PC 
and Macintosh have different 256-color palettes. Only 216 colors work in 
common on the low-color modes of both the Mac and the PC. 



If you use a color that's not one of these 216 Web-safe colors, you may find 
that the color displays oddly on some systems. (These non-safe colors dis- 
play as blends of other colors, making an odd and ugly effect.) A graphic that 
looks good on your computer may look awful on someone else's, though this 
is more of an issue for GIFs than for JPEGs. If you stick to the Web-safe colors, 
you won't have this problem. 

Several online sources allow you to mix and match different combinations of 
the Web-safe colors to find ones that look good. Go to this Web site to find 
Web-safe colors: www . lynda . com/hex . asp. 
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Obtaining and creating graphics 

/ant to put various graphics on your Web page. Great! But how do 
ite them and get them in the right format (GIF or JPEG)? Fortunately, 
creating the graphics you want, or finding some to use, is pretty easy. 

The easiest way to obtain graphics is to get access to a clip art collection. 
Computer stores sell many inexpensive collections of business and recre- 
ational graphics on CD-ROM. You can also access a number of royalty-free 
graphics and icon collections online. 




If you're doing a business or professionally focused Web page, it's important 
that it have a clean, professional look. To get this kind of look, you have to 
use attractive graphics and lay out your page carefully. Chapter 14 tells you 
how to design your page appropriately for various purposes. 



You can spend endless hours looking for art online. In fact, just this search 
alone may make you glad to be creating a Web page. You may not get a lot 
done for a few hours while you're looking, but you'll see a lot of neat stuff! 

To get you started, here's a listing of sites we find especially cool: 

For a large number of different kinds of resources, go to the main 
WebReference site at www. webreference . com. 

For images, go directly to the images area at www. webreference . com/ 
author ing / graphi c s / image s . html . 

i>* For backgrounds, visit www. webreference . com/authoring/ 
graphics /backgrounds . html. 

For photographs, try a site with preexisting stock photos — www . 
imagestate . com is one we can recommend. Another choice, popular 
with professionals, is www. gettyimages . com. 

You can find many more sites that offer images and image conversions. 
Start with the sites that we mention and expand your search until you 
find what you need. 

Using the Image Search feature on the AltaVista search engine is one of the best 
ways to look for suitable graphics. Be careful, though: Most of the graphics you 
find are copyrighted; for your Web site, you should only use images that are 
explicitly made freely available. Visit AltaVista at www . altavista . com. 
Google also has an image search feature; check it out at www. google . com. 
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Formats FAQ (Frequently 
Asked Questions page or area on a site) 
can answer almost any conceivable ques- 
tion about graphics. For a wide array of infor- 
mation, visit www. dcs . ed . ac . uk/~mxr/ 
gf x/utils-hi . html. Links from this site 



lead to detailed technical information about GIF, 
JPEG, and other file formats. For a detailed 
description of how to use images well, see cgi . 

netscape . com/assist/net_sites/ 
impact_docs/ index . html. 



In addition to searching online, another way to get graphics is to whip out 
any paint program and draw the graphics that you want. For example, 
Windows includes a free graphics program (Windows Paint) that you can use 
for your initial graphics work. Even inexpensive paint programs today enable 
you to create some stunning graphics; you're limited mostly by your imagina- 
tion and artistic ability (which for some of us can be quite limiting!). 

For big-bucks commercial work and fine art, people regularly use high-end 
programs such as Adobe Photoshop and Adobe Illustrator. If you lack talent, 
you can always ask one of your artistically inclined friends to help you, or 
you can even recruit a starving art student. 

Another technique is to use a scanner. You may already have one at home, or 
have use of a scanner in your office. If not, head to your favorite copy shop 
and rent some time on its scanner. Scanning is a perfect way to put photos 
online. Simply scan your graphic or photo, save it in GIF (for graphics) or 
JPEG (for photographs) format, and slap it on your Web site. Or work with a 
photo developer, such as a suitably equipped local developer, a chain store 
such as Wal-Mart or Rite Aid, or a mail-order and Internet operation such as 
PhotoWorks (www.photoworks . com), that can develop your film right to 
diskette or Photo CD. 

The fourth way is to take photographs with a digital camera. Digital cameras 
come with cables that connect the camera to your PC to download the pho- 
tographs onto your computer. They also come with software that enables you 
to edit the photos on your PC and save them, usually in JPEG format. 

But how can you make sure that your graphics are in the proper format? That 
turns out to be easy, too. Many paint programs and most scanning software 
let you save a graphic in either GIF or JPEG formats. If your program doesn't 
save in these formats, it may be for one of two reasons: 

v 0 During installation, you may have chosen not to install converters for 
GIF and JPEG. Haul out your original install disks and see whether you 
can reinstall the program with the correct translators. 
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v 0 If converters are not the problem, call your program's manufacturer or 
visit its Web site and see whether it has an update that enables the pro- 
to save to GIF and/or JPEG formats. If your current software 
or can't sell you a program that handles GIF or JPEG, you can easily 
find a new one that does. 




No matter what format your graphic came in originally, you can convert it to 
GIF or JPEG by using software that you can easily obtain from the Web. Mac 
users can run GIFConverter (available at www. kamit . com/gif converter/), 
and Windows users can run the excellent LView program to convert between 
multiple formats (find LView at www . lview . com). Save your graphic as a GIF 
or JPEG file, and you're ready to incorporate the graphic into your Web page. 

Save your image in the program's default format in addition to saving it as a 
GIF or JPEG. When you save as a GIF or JPEG, the image can lose information. 
Every time you reopen the GIF or JPEG image, edit the file, and then save it 
again, you lose even more information. So save your file in its default format 
to preserve the data in it for later editing, and save a separate copy in GIF or 
JPEG to use on the Web. 



Dealing vOith Graphics 

The most difficult aspect of including graphics in your Web pages is resolving 
all the design issues that accompany the use of graphics. Creating effective 
graphics and placing them properly in relation to your text is not as easy as 
boiling water. This book doesn't cover all the complexities of graphic design. 
However, we can tell you the additional concerns that arise when you use 
graphics on the Web so that you can effectively apply your own graphics 
skills — or those of people who work with you — to your Web pages. 



Speeding up siou) pages 

One of the Web's ongoing problems is download speed — the amount of time 
a Web page takes to appear on the user's screen. Download times are espe- 
cially slow for graphics-rich pages, which, although more interesting to view, 
can be more frustrating because they appear more slowly. And the trade-off is 
not simple; lots of variables intervene. For example: 

Access speeds: Different users access the Web through connections that 
run at different speeds. And the same server can serve up a Web page at 
different speeds, depending upon how busy the server is. When you test 
your brand-new, graphics-rich page on your local machine, everything 
may run fast. But when you upload that same page to a server and 
access the page over a 56 Kbps (kilobits per second) modem, the page 
loads much more slowly. 
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Many more users now have broadband (fast) access at home, as well as 
at work. The good news is that most users will see your graphics 
kly. The bad news is that the still-substantial minority with slow 
ss are getting more and more frustrated as Web authors who have 
broadband access get careless about page sizes! 

W Good and bad graphics: If you plan to spend your users' time on down- 
loading big graphics, invest some of your own time and money upfront 
to make sure that the graphics are as high-quality as possible. People 
don't mind waiting for a good graphic nearly as much as they mind wait- 
ing for a bad one. A good graphic may be a product shot that shows a 
Web surfer exactly what he or she is going to get. A bad graphic may be 
a banner that says "HELLO!" in six fluorescent colors. 

Frustration levels: The same users who enjoy watching your page 
appear in the morning while drinking a cup of coffee may be tempted to 
scream at their browser when they try to quickly check out your page 
just before heading home from work — especially if they had a bad hair 
day, a bad boss day, or even a bad browser day. The better a job you do 
with your graphics, the more your page will please people. 



What on earth can you do to address all these factors, especially when they 
combine to make your page slow and your users grumpy? Be clever: 




i>* Limit the number of colors in your graphics to make the files smaller so 
that they download more quickly. 

V Get expert advice — from someone you know or a book — or look at 
cool sites online to help you make the graphics you do use more inter- 
esting to look at. 

Lightly sprinkle your page with small graphics, rather than burdening it 
with several big ones. 



What about rights? 



You can find a number of great graphics in 
books and magazines and on Web sites. Can 
you just scan or copy these graphics and use 
them in your own Web site? Should you? 

Yes and no. Yes, you can; but no, you shouldn't. 
Publishers either own the images that they use 
or obtain a license for them. You can't legally 
use most images on your own Web site without 
either buying or licensing them. 



For some images on the Web, simply sending a 
note to the Webmaster gets you a quick okay. 
But for most Web images and for nearly all 
images in print, permissions may be very hard 
to get. Creating a new image that serves the 
same purpose is often easier than negotiating 
permissions. And then maybe you can make a 
little money licensing your new images out to 
other people! 
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Table 12-1 shows the time necessary to download 60K (kilobytes) of data. A 
text-only page is usually just 2-3K, but pages with graphics are much larger. A 
quarter-screen GIF image, for example, may be about 50K. Compare 
size of all the elements in your page to the times shown in Table 12-1 
get an idea of how quickly your page loads for the most speed-deficient 
user, and then design with that person in mind. 



Table 12-1 


Slowest Download Times 




Access Speed 


Description 


Time to Download 
60KFile 


28.8 Kbps 


Low-end Internet modem 


35 seconds 


33.6 Kbps 


Mid-range Internet modem 


30 seconds 




56 Kbps 


Fast Internet modem 


20 seconds 




DSL 


Special phone line, modem 


4 seconds 




Cable modem 


Special cable hookup, modem 


1 second 




Ethernet 


Standard network 


Less than 1 


second 



Avoiding three biq mistakes 

Don't make these three big mistakes relating to graphics on the Web: 

i>* No graphics: Having no graphics on your Web pages means having 
boring pages. Because you're reading this chapter, we assume that 
you're trying not to make this mistake. 

Too many graphics: Using too many large, slow-to-download graphics 
may be the biggest newbie Web author mistake. (A lot of old hands make 
this mistake as well.) 

v 0 No text alternative: Some users don't have graphical capability at all, 
and an increasing number of vision-impaired people use the Web. You 
need to accommodate these users by creating your page in a way that 
supports text-only access as well as graphical access. 

Try an experiment: Go into your browser, turn off the graphics display, and 
load your Web page. If you can't tell what is on the page or what links go 
where, you need to redesign your page. (Then, just to blow off steam, or if 
you don't have a Web page up yet, try the same experiment on some other 
people's pages and send them a note if you have problems.) 
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The usual way to redesign your page for text-only access is to include a tex- 
tual menu linking to the same places as your graphical menu. Some sites pro- 
ole parallel set of Web pages that are purely textual rather than 
Providing parallel, text-only pages lets the user choose whether to 
go for the attractive, bandwidth-sucking graphical pages or for the very fast 
text-only pages, and enables those with visual impairments to enjoy the full 
benefits of the Web. 




In the past, many have chosen text-only access because of slow download 
times. However, because the percentage of users with non-broadband access 
continues to drop, providing a complete set of text-only pages may be 
overkill. Consider providing a text-mostly version, with limited use of images, 
simpler layout, and alternative text for images. This option may be just the 
ticket for users with visual impairments. 

Here are the most important rules for supporting text and graphical access: 

As you design and create your page, think about how your page will look 
with all graphic access turned off as well as on. 

f" Test your page with graphics turned off. 

f Test your page in different browsers. 

Include ALT tags — actually, the ALT attribute within the IMG tag — in all 
images so that explanatory text appears whenever a graphic isn't dis- 
played. (See this chapter and Appendix B for details about HTML tags 
used in graphics.) 

Provide text-only menus in addition to icon-based selections and image 
maps. 

If you want to make everyone very happy, consider creating a separate, 
text-only version of your site. 

If you're considering creating a Web site that's accessible by portable devices 
such as the PalmOne or RIM Blackberry line of handheld devices, creating a 
text-only version of your site makes a great deal of sense. The text-only ver- 
sion of your site is a good starting point for handhelds. 



Using Graphics in HTML 



The <img> tag is the HTML tag that causes an image to appear embedded in 
your Web page. (See Chapter 8 for more on HTML.) Here are the HTML tags 
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for a page that displays the image menugraphic . gif by using the <img> 
tag, and then a text menu as an alternative: 



<p\[(^|RC= "menugraphic . gif " ALT= " Menu Graphic "> [ <A 
HREF= "about. html ">About</A> | <A 
HREF =" home. html ">Home page</A> | <A 
HREF=" links. html ">Fun Links</A> | <A 
HREF= "map. html ">Site Map</A> | <A 
HREF=" search. html ">Search Map</A> ] 

It's good to know some HTML even if you are using a Web authoring program 
that allows you to drag and drop images, specify compression options, and 
so on. Why? Because you may need to make changes in options like the ALT 
text for the image or the directory that a file lives in. Your Web authoring pro- 
gram, or a text editing program, allows you to change the HTML directly, 
quickly, and accurately — if you know a little HTML. 

With that in mind, here are three useful graphical effects for your Web pages: 

Accents: Small graphical images that serve as labels or highlights 
("New," "Top Ten," and so on). 

V Icons: Small graphical images that serve as links to another page. Click 
the icon, and you move to a different Web page. 

Thumbnails: Small graphical images that serve as previews of larger 
images. Click a thumbnail to download the larger image. 

Accents use the <img> tag to link to a small graphic — an inline graphic that 
appears as part of the page, unless graphics display is turned off. 

Icons and thumbnails combine the <img> tag, which makes the icon or 
thumbnail image appear, with the <A> (or anchor) tag. (Don't start singing 
"Anchors Aweigh" on this one — you need anchors here!) The anchor tag 
establishes a link to the Web page or larger graphic that appears when you 
click the inline graphic. For more on the anchor tag, see Chapter 13. 

The steps in the following sections describe how to use the image tag, the 
anchor tag, and the alt option separately and together. With these tags, you 
can combine graphics and navigation to create all kinds of effects. 

Review the HTML tag definitions in Appendix B to find out about other 
options for these tags. You may also want to check out more advanced 
books, such as HTML 4 For Dummies, 5th Edition, by Ed Tittel and others, 
and Creating Cool HTML 4 Web Pages, 2nd Edition, by Dave Taylor (both from 
Wiley) for more details and how-to information on advanced HTML options. 
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the <1MG> taq for inline graphics 

ae <img> tag to embed an inline graphic that appears as part of your 
fe, along with the alt option to specify "alternate" text, follow these 



1. Create or find a graphic that you want to use. 

Inline graphics that are embedded in the page should be small for fast 
display — about the size of a business card or smaller. Use the sources 
we describe in the "Obtaining and creating graphics" section earlier in 
this chapter to find or create graphics. 

2. If you're using SeaMonkey Composer, choose InsertOImage. Type the 
URL of the image in the text entry box, or choose a file from your 
hard disk with the Choose File button. If you're working directly in 
HTML, add the <img> tag with the SRC, or "source," option to specify 
the image's pathname. 

For a graphic that's in the same directory as the HTML file, use the 
<img> tag and SRC option like this: 

<IMG SRC="new.gif "> 

For a graphic that's at a different Web site, use the <img> tag and SRC 
option like this: 

<IMG SRC="http: //www. grafixsite. com/new. gif "> 

3. Add the alt option to specify text that appears if the graphic can't be 
viewed — for example, if the user is running a text-only browser or 
has graphics turned off. In SeaMonkey Composer, put the text in the 
Alternative Text text entry box. If you're working in HTML, add the 
alt option and text within the <img> tag, like this: 

<IMG SRC= "http : / /www. grafixsite . com/ new. gif " 
ALT = "New! "> 




Don't depend on someone else's site being up at all times and always staying 
unchanged. If possible, copy the graphic that you need into your own site's 
directory and refer to it there. Make sure, though, that you're not violating 
copyright laws in doing so. 



Two more reasons to use alt tags: when the user moves their cursor over a 
graphic, the alt text shows up next to it in a little text box called a ToolTip. 
Also, search engines use alt tags as well. 
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steps: 
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As we note in the first part of the section on graphics and HTML, one of the 
best ways to jazz up a Web page "cheaply" — that is, without slowing down 
the page a lot for everyone — is to use graphical elements as icons that link 
to outside information, such as a larger image or a different Web page. This 
technique is a great way to make your page appear graphically rich without 
burdening your users with long download times. 

To add an anchor to create a graphical link, use the <img> tag between the 
beginning and ending anchor tags. If you also embed a word or phrase 
between the beginning and ending anchor tags, you give the user a choice 
between clicking the image or clicking the phrase. The following steps 
demonstrate how to create a graphical link: 

1. In SeaMonkey Composer, use the InsertOImage command to bring in 
an image. In a text editor, use the <img> tag to bring in the inline 
image that you want to use as a thumbnail image or icon: 

<IMG SRC="minibud. jpg"> 

2. In Composer, click the image and choose Inserts Link. In a text editor, 
add an anchor tag (<a>) to specify the link. 

To display a larger image when a user clicks the small image, specify 
an anchor with an HREF, or Hypertext REFerence, that points to an 
image file: 

<A HREF="maxibud. jpg"> <IMG SRC="minibud. jpg"> </A> 

Figure 12-2, from Boojum Expeditions, shows a thumbnail graphic and 
the larger image that appears when the user clicks the thumbnail. 
John Forrester's travelogue can be found at http : / /boojum. com/ 
photographs . html. 

For a link to another page, specify an anchor with an HREF that points to 
an HTML document: 

<A HREF ="bebakpg. htm "> <IMG SRC= "bebak . jpg" > </A> 

An HTML option not only allows you to resize an image, but also speeds up 
page displays. Add the height= and width= options within the <IMG> tag 
to specify, in pixels, the height and width of your image. In SeaMonkey 
Composer, use the Dimensions area within the Image Properties dialog box 
(which appears when you choose InsertOImage). Browsers use this informa- 
tion to fill in the rest of the page around the image first, allowing the user to 
scroll up and down in the page and read it while the graphic builds on-screen. 
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Figure 12-2: 
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The height and width options can stretch or squeeze an image to make it 
appear different than its actual size. However, these options don't change the 
actual image. You must keep the height and width options proportional with 
the original image to avoid having the image stretched in one dimension. 
Also, if you put a small image in a large area, it will be stretched out to fit and 
appear odd. If you put a large image in a small area, it will look good, but the 
file size will be large compared to the amount of space the image takes 
onscreen. To prevent these problems, use an image editing program such as 
Paint Shop Pro to edit the image to the correct size, rather than using the 
height and width options to resize the image. 




One of the most important ways for intermediate and advanced Web authors to 
organize their pages is by using invisible tables to position text and graphics 
relative to one another. Chapter 14 has a brief description of tables. This 
method is tricky! For example, a table-structured page that looks great at one 
monitor size can easily look terrible on a larger or smaller screen. Find some 
well-laid-out Web pages and view the Web pages' HTML source to see how 
other Web publishers use invisible tables. For an introductory tutorial, see the 
well-written article in Web Developer's Journal at webdevelopers j ournal . 
com/ diary / 10_24.html. 
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idespread on the Web, and download times are important; therefore, 
we recommend four advanced techniques for doing fancy things with GIFs: 

f Transparent GIFs: Everyone needs to know this one. All GIFs are rectan- 
gular, but many of them seem to float over the background with no obvi- 
ous border. These GIFs are transparent — the images' backgrounds are 
invisible — so they blend seamlessly into the browser's background. If 
this doesn't make sense, look closely at the example in Figure 12-3, 
which is from the For Dummies Web site — you see two For Dummies 
logos with black backgrounds and one with a transparent background. 

i>* Interlaced GIFs: Not everyone needs to know about this one, but we 
mention it (again!) because if you use large, complex graphics, interlaced 
GIFs are worth knowing about. An interlaced GIF depends on an HTML 
feature that paints every fourth line of an image, then every second line, 
and so on until the image is complete. The image seems to appear at a 
low resolution and then gradually sharpens until the process is complete. 

Animated GIFs: The basic GIF specification, GIF89a, supports animation 
as well as static images. All you need to do is create a series of images 
that, when viewed in sequence, form an animation (like an old-fashioned 
flip book). Then you package the images together as a single GIF, using 
readily available tools, and include the GIF file in your Web page. Voila! 
Instant animation. (But at a big cost in file size — the file size of a four- 
image animation can be as large as having four separate images.) 

Clickable image maps: Clickable image maps are very common in big- 
money sites, and even in many smaller ones. A clickable image map is a 
graphic with different hot spots that, when clicked, take you to different 
Web pages or locations within a Web page. This kind of graphic is cool, 
but it's YABG (Yet Another Big Graphic), and you need design skills to 
make a good one. 



Graphics can 

We spend a lot of time in this chapter discussing 
how much time the user can spend download- 
ing graphics. But what about the demand that 
using graphics places on your time as a Web 
developer? 

Creating and editing graphics is fun! But creat- 
ing even a simple business graphic, such as a 
bar graph, can consume hours of fooling around 
with fonts, colors, and image sizes. Getting your 



be a time sink 

images Web-ready and testing them takes up 
even more time. Working with graphics can 
easily become the most time-consuming part of 
creating and updating your Web site. 

What to do? Use small graphics (and use them 
sparingly) while you gain experience. After you 
have experience, or afteryou hire someone who 
does, you can develop and deploy those knock- 
out graphics that distinguish the best Web sites. 
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Transparent GlFs 

Here are the steps to create a transparent GIF: 



1. Choose a color in the image's background to make transparent. 

Every pixel in your image that's of the selected color becomes transpar- 
ent. Choose a color that's used only in the area around the image, not in 
the image itself, because every pixel of the selected color becomes 
transparent. You may need to edit the image's surrounding area — the 
area that you want to be transparent — so that it's a different color from 
the rest of the image. The usual choices for transparency are white or 
the light gray background color most browsers use. 

For details on the procedure for choosing an area to make transparent, 
see the Webmonkey Web site at www . webmonkey . com/webmonkey/ 
9 6/35/ index2a . html ?tw=de sign. 

2. Use your graphics package or a tool to make the image transparent. 

For the Macintosh, use Transparency, which you can find on the Web at 
C I NET's www . download . com Web site and elsewhere. For the PC, use 
Paint Shop Pro, which is also at download . com in a trial version. 
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For any platform, you can use a Web-based package called TransWeb 
on the Massachusetts Institute of Technology (MIT) site at www. mi t . 
/ tweb/map . html. This package reads the image, converts it, and 
lays the result. You can then right-click on the image to save it to 

To use TransWeb, you have to move your image to a Web server. You 
can do this as part of the process of creating a simple GeoCities Web 
page, as described in Chapter 2. Then go to the TransWeb Web site and 
follow the instructions. 

3. Add the image to your page, as we describe in the "Use the <IMG> tag 
for inline graphics" section earlier in this chapter. 

4. Test to be sure that the background color of the image remains trans- 
parent with several different backgrounds. 

Bring up the image in your browser and then change the browser's 
default background color. Make sure that the background stays invisible 
throughout. 



Animated GlFs 

Animated GIFs are also supported online. You can find out how to use them 
and start putting them in your Web pages by using info out on the Web. To 
read the true and fascinating story of how animated GIFs were invented, and 
to link to many supporting examples and resources, go to these Web sites: 



http: 


/ /members . 


aol . com/royalef /gifmake 


.htm 


http: 


/ /builder . 


com. com/ 5100-3 1-5078158 


.html 



Ctickabte imaqe maps 

To create a clickable image map, you must first create the graphic. (See the 
University of California, San Diego Web site at www . ucsd . edu for an example 
of an attractive, clickable image map.) Then you have to create a special file 
that maps regions of the image to specific URLs. A program that is available 
on the Web, Mapedit, maps image regions for either Macintosh or Windows. 
(You can find Mapedit at www.boutell . com/mapedit.) Just load the image, 
click and drag over it to define clickable regions, and then enter the URL you 
want to link to. 

Microsoft Internet Explorer and all other up-to-date browsers support what 
are known as client-side image maps that don't require server involvement in 
any processing when the user clicks an image. Browsers are now smart enough 
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to map the image, click to a URL, and fetch the URL directly without going 
through the server. See the Netscape 2.0 documentation or the Netscape site 

//wp .netscape . com/assist/net_sites/html_extensions_3 . 
more information. 



Adjusting Graphic Size 

You can specify the size of an image when you insert it into your Web page. 
Within the img tag, you add two options to specify the image's size: width 
and height. If you're using SeaMonkey Composer or another WYSIWYG Web 
page creation tool, the program then stores these values in the width and 
HEIGHT options for you. 

Every graphic has an actual size — a height and width in pixels. When dis- 
played at this size, the graphic looks as good as it's going to look. However, 
graphics can be stretched or shrunk to fit into an available space. 

There are two very different reasons for specifying the size of your graphic — 
one excellent and one questionable: 

f To tell the Web browser what size the image is: This is the excellent 
reason. When you specify the height and width of your image in the Web 
page, the user's Web browser sets aside just the right amount of space 
for the image to load on-screen while it continues displaying text. 
Because text can be transmitted so much faster than graphics, this often 
allows the user to see all of the text in a page and start reading it with- 
out having to wait for the image to appear. 

To stretch or squeeze the image: This is the questionable reason. If you 
enter a height or width that is different from the image's actual size, the 
user's Web browser stretches or squeezes the image to fit. This has no 
effect on the text, but can produce some very odd-looking results in 
terms of the appearance of the image. 

If you are going to stretch or squeeze the image, you can set the height and 
width options four different ways: 

f* Scaled smaller than the original image: You can reduce the height and 
width by an equal proportion — say, one-third less, or 10 percent less — 
than the original image. The image will be smaller and still look good. 
However, it will still take up the same amount of file space as the original 
and take just as long to download and appear on-screen. It's better to 
edit the original image so it actually is smaller and then display it at its 
new actual size — the file will be smaller and download quicker. 
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V Scaled larger than the original image: You can stretch the image by 
increasing the height and width in equal proportions. The image is 
tched evenly. It doesn't look too odd, but you can usually see some 
aks" in the image as a result of its being stretched. This option gives 
you a quick way to get a small image to fill a large space, but you're usu- 
ally better off adjusting the image size in an editing program like Adobe 
Photoshop, which lets you fix any problems that come up. That way, you 
can use the new, edited image at its actual size. 

Scaled out of proportion to the original image: For most images, the 
worst thing to do is to set the height and width disproportionately. Let's 
say you have a 50 x 50 image but you need to fill a 100 x 50 space (that's 
100 pixels tall by 50 pixels wide). You can simply set the height to 100 
and the width to 50, and the user's Web browser stretches the height of 
the image accordingly. However, the result is likely to look awful. 



Figure 12-4 shows an image and the results of scaling the image smaller and 
larger, both out of proportion. It wasn't such a great a picture to begin with, 
but you can see that the changes have made it even worse. You can use any 
of these options as needed, but caveat artifex — let the artisan beware — the 
results aren't likely to be great. 



Figure 12-4: 
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e trickier things to do on your Web page is to get graphic images 
and text to work well together. You have several choices for placing an image, 
from simplest to trickiest: 

f Putting text above and below — but not beside — the image: You can 

create a clear area in the middle of your text and put the image in the 
middle of it. You can also put a caption below the image. This solution 
wastes the area to the left and right of your image, but it's the easiest to 
implement in HTML and creates the simplest layout. Your readers also 
don't have to adjust, as they're reading, to the "bump" in the text around 
where the picture is. 

«* Putting one line of text beside an image: You can put text beside your 
image and align the line at the top, middle, or bottom of the image. 
Figure 12-5 shows an example. This used to be the only way that HTML 
allowed you to position an image relative to text, and it produced some 
ugly layouts. 

«" Wrapping text around an image: A command that allows text to actu- 
ally wrap around an image — in the manner we're all used to from maga- 
zines — was added to HTML several years ago. (The command in 
question is the HTML align attribute within the img tag.) By now, 
almost all browsers in use support this feature. 

V Using a table to control precisely where everything goes: You can use 

the HTML table command to create a grid into which you can then 
place text and images, just like you might if you were laying out a news- 
paper page. This is difficult to do, and it can force you to redo the table 
every time you want to make even a small change in your image or your 
text. Because it allows such precise control, this option can produce the 
best-looking — or, if you don't do it just right, the worst-looking — 
results. 



The most popular approach to placing graphics with modern Web browsers 
is to wrap text around the image. We show you how to do that, directly using 
HTML tags or by using SeaMonkey Composer, later in this chapter. 
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Putting a Border around a Graphic 

One of the more important elements in designing a page to look good is white 
space — "empty" space that separates different parts of the page from one 
another. If content is crowded together too closely, the page as a whole looks 
chaotic. 

White space is especially important when you flow (or wrap) text around a 
graphic, as we describe in the previous section. You can specify the amount 
of white space that surrounds a graphic, add a solid border to set the graphic 
apart, or both. 

Most photos look better with a thin black border around them. We describe 
how to add such a border, either directly in HTML or in SeaMonkey 
Composer, later in this chapter. 
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It's good to know your HTML, but working with graphics is much easier in a 
WYSIWYG tool such as SeaMonkey Composer. We recommend that you work 
in the tool, and then look at the underlying HTML to learn about it, rather 
than doing all your work directly in HTML. 

To place a graphic in Composer and specify the graphic size, text flow, spac- 
ing, and border, if any, follow these steps: 





1. Open SeaMonkey Composer. 

2. Type in some text, or copy and paste it in. 

It's much easier to experiment with placing a graphic if you have some 
text in your document. 

Consider saving the file at this point. If you do, SeaMonkey will use a rel- 
ative URL for the graphic — trust us, it's simpler. 

3. Place the cursor at the start of a line of text in your document. Then use 
the Insertcimage command to insert a GIF or JPEG image, as described 
earlier in this chapter. Click OK to close the Image Properties dialog 
box so you can see how things look before making more changes. 

If you don't have an image handy, you can find instructions on how to 
create images and sources for free images earlier in this chapter. 

An example of how your document may look at this point is shown back 
in Figure 12-4. 

Note that at this point the text is crowded right up against the graphic. 
The text doesn't all wrap around the graphic — only one line of text 
appears next to the graphic. 

4. Double-click the image to open the Image Properties dialog box. If the 
button to the left of the Image Preview area says More Properties, 
click it to show all the properties. 

Figure 12-6 shows how the dialog box appears at this point, with the 
image placed and with tabs available for changing the image's location, 
dimensions, appearance, or linking characteristics. 

Move the Image Properties dialog box to a spot on your screen so you 
can see both the image and the dialog box. 

You don't have to specify the image's width and height in Composer. The 
program automatically adds the width and height options to the img 
tag, or adds relevant style attributes to accomplish the same task, using 
the image's actual width and height. You should, however, add alternate 
text, using the option visible in the picture. 
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5. To scale the image to a larger or smaller size, click the Dimensions tab 
and then click the Custom Size radio button. In most cases, you will 
want to leave the Constrain check box checked. Change the Height or 
Width to the value you want. 

Clicking Custom Size allows you to change the image's height and width. 
By leaving the Constrain check box checked, you tell Composer to auto- 
matically keep the width and height scaled proportionally with the 
image's actual height and width. 

The Image Preview doesn't change to reflect the dimensions you enter. 
Even if you clear the Constrain check box and enter a height twice as 
large as you did previously, and keep the width the same, the preview 
will not become tall and skinny to reflect the change. The Image Preview 
is actually an "image view" of the underlying image, not a preview of 
how it will look on your Web page. 




After changing any of the values in the Image Properties dialog box, click 
OK to close the dialog box and see what your page looks like with the 
new values. Then double-click the image to open the Image Properties 
dialog box again. 



6. Change the pull-down menu in the Align Text to Image area on the 
Appearance tab to reflect how you want text to flow around the 
image: A single line of text aligned to the top, center, or bottom of 
the image, or all of the text flowing to the left or right of the image. 

If you want to create a caption next to the image, you'll want to use the 
At the Top, At the Center, or At the Bottom option, each of which aligns 
a single line of text next to the image accordingly. If you don't want cap- 
tions, you have two choices. You can choose Wrap to the Right to keep 
the image on the left margin and wrap text to the right, or you can choose 
Wrap to the Left to push the image to the right of the page and flow text 
down on its left. 
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In the Spacing area on the Appearance tab, specify the number of 
pixels of blank area that you want around the image. 

ss you have a special reason to do otherwise, we suggest starting 
the same amount of spacing for the Left and Right spacing and the 
Top and Bottom spacing. Four pixels is a good starting point. Fine-tune 
the numbers as needed to create the right look when you have your final 
text and images available. 

8. Still in the Spacing area, specify the size of the border that you want 
around the image. 

A thin border around an image makes the image stand out much better 
from the surrounding white space and text. Try a 2-pixel-wide border to 
start, and then adjust it from there to get the look you want. 

For consistency's sake, use the same spacing and border width around 
each of your images. You may need to experiment to find a set of values 
that works well for all your images, but the effort is worth it. Even minor 
inconsistencies of a pixel here or there are enough to throw off the over- 
all appearance of your pages. 



Placing a Graphic in HTML 

Fine-tuning the positioning of graphics by using HTML directly is a frustrating 
exercise unless you're somewhat of an expert in Web design. If you're new to 
design work, be prepared to experiment. Luckily, experimenting is much 
easier using a tool such as SeaMonkey Composer than it is with a text editing 
program such as Notepad. So we recommend that you use Composer, as 
described in the previous section, to place your graphic. 

However, if you prefer to write the HTML in Notepad or another HTML editor, 
use the instructions in this section. Use the figures in the previous section to 
see how your pages should look as you experiment with different options. 

To place a graphic in HTML and specify the graphic size, text flow, spacing, 
and border (if any), follow these steps: 

1. Open a document in a text editor. Save it with the extension .htm to 
make sure that it's treated as an HTML document. 

2. Type in some text, or copy and paste it in. 

It's much easier to experiment with placing a graphic if you have some 
text in your document. 
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3. Insert an image into the middle of the text using the <img> tag. Add 
alternate text to explain what the image is. 



correct syntax to use is <img SRC=url alt= "text ">, where url 



' isSrWeb address and text is a brief description of the image. See 
Chapter 12 for details. 

4. Save your document and open it in a Web browser to see how it looks 
at this point. 

Your document looks something like Figure 12-2, shown earlier in the 
chapter. 

Continue to save your document and look at it in your Web browser as 
you add tags and change options. Or, if you are making changes in the 
HTML Source tab of SeaMonkey, click the Preview tab. This helps you 
see how the page looks after each adjustment you make. 

Click the Refresh or Reload button in your browser to update the Web 
page to reflect the most recently saved version of your document. 

5. Add the width and height options to the <img> tag. 

In most cases, set these options to the actual width and height of the 
image. If you want to change the size of the image, or to change its propor- 
tions, calculate the appropriate values for the width and height options 
and enter them. (But see Figure 12-4 before changing the proportions.) 
Then review the result in a Web browser. 

The <img> tag now looks like this: <img SRC=url width=xx 
HElGHT=yy>, where xx is the width, in pixels, and yy is the height, 
in pixels. 

Adding the width and height options with the actual values of the 
image doesn't change the look of your page, but it does make it easy for 
a Web browser to load the rest of the page quickly around the image. 
Using different values changes the look of your image and your page. 

You can find the actual width and height of your image by right-clicking 
the image's icon onscreen. Right-click, choose Properties, and the 
image's width and height are displayed. 

6. To specify text wrapping, add the align option to the <img> tag. 

The most commonly used options are right, to wrap text to the left of 
the image, and left, to wrap text right of the image and move the image 
over to the right. Other options are top, middle, and bottom. If you 
don't specify the align option then the default value, bottom, is used. 
With this option, the text is shoved to the right and positioned at the 
bottom of the image, leaving an odd gap in most of the area next to the 
image. This is hardly ever what you want. Start with align=right, and 
change things around later if you want a different effect. 
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To create white space around an image, add the h space (for horizon- 
tal spacing) and vspace (for vertical spacing) options. 

ace creates an equal number of pixels of space to the left and right of 
mage; vspace creates an equal number of pixels of space above and 
below the image. Good settings to start with are hspace=4 vspace=4. 

8. To create a black border around the image, add the border tag. A 
suitable value is border=2. 

If you've specified all the possible options, your tag now looks some- 
thing like this: 

<IMG SRC=url ALT="text" WIDTH=xx HEIGHT=yy ALIGN=right 
HSPACE=4 VSPACE=4 B0RDER=2> 

As mentioned earlier, for consistency's sake, use the same spacing and 
border width around each of your images. You may need to experiment to 
find a set of values that works well for all your images, but the effort is worth 
it. Even minor inconsistencies of a pixel here or there are enough to throw off 
the overall appearance of your page. 
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In this part . . . 

#n this part, we show you how to kick your Web site up 

a notch. Find out how to turn your single page into a 
complete, multipage Web site. We also explore elements of 
a well-designed Web page, and then show you how to pub- 
lish your site for all the world to see. 
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In This Chapter 

Finding out about linking basics 
Linking within a page 
Avoiding mistakes 
Linking to a Web page 
Creating a mailto link 



§My eb hyperlinks — the connections that let you go from one Web page to 
▼ ▼ another with a single click — are the key to what makes the Web 

great. They're also a bit complicated to create, test, and maintain. We show 

you how to do it right in this chapter. 

Hyperlinks, known as links for short, have a long and honorable history. They 
are the underlying concept behind hypertext — a kind of writing that takes 
advantage of computer and network capabilities to connect a spot in a piece 
of text to other information that supports, gives detail on, defines, describes, 
relates to, or even contradicts the information at the spot where the link is. 

Hypertext was discussed and implemented in smaller systems long before 
the World Wide Web was invented. Theodor Nelson invented the term in 
about 1960 and promoted the idea for decades. He wrote a famous book 
called Computer Lib/Dream Machines that described many different types of 
hypertext and uses for it. (The book is currently out of print, but if you are 
interested, you may be able to track down a used copy on eBay or Amazon 
Marketplace.) 

The idea of hypertext became popular within the computer industry through- 
out the 1980s, as more and more computers were getting connected to net- 
works. The reason for the growth of interest in hypertext was simply the 
truth behind a rule called Metcalf 's Law: The value of a network rises expo- 
nentially with the number of computers connected to it. 
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So it is with hyperlinks. Using a hyperlink, you can connect your Web page to 
any information on any other Web page out there. As the Web has grown, the 
ber of available hyperlinks has grown rapidly with it, to the point 
the number of links is seemingly infinite. Clicking around the Web 
via hyperlinks is so much fun that the term "surfing the Web" is used to 
describe it. 




The images that appear in your Web page are also connected to your page by 
a kind of hyperlink. This feature is responsible for much of the power and 
flexibility of the Web — and a lot of the difficulties that arise when moving 
the HTML file, and the graphics that are supposed to appear in it, around. 



Linking Basics 

Before you plunge into specific kinds of links, as described in this chapter, 
getting an overview of how links work is helpful. The basic idea, remember, is 
for your HTML document — the core of your Web page — to refer to another 
file. The user is either going to see that file in your Web page, for instance as 
in a graphic embedded in the page, or click something in your Web page to 
leave it and link to the other file. 



9^5/ One of the biggest problems users have on the Web is broken links: a link that 
^\ doesn't do what it says it does. Encountering a broken link is very frustrating, 
and you, as the Web page publisher, may not find out about the problem for a 
long time. Create and test your links carefully and repeatedly, fixing any prob- 
lems, to avoid broken links. 



Hotf links tiork 

The basic mechanism for creating a link from one Web page to another is 
simple. You use the <a>, or anchor, tag to begin the link. Within the anchor 
tag, you can specify where the link goes to, using the HREF attribute to spec- 
ify the Hypertext REFerence, or destination, of the link. Some text within your 
document usually follows the anchor tag. An </a>, or end-of-anchor, tag then 
follows that text. 

Here's an example of a typical anchor tag within a sentence of text: 

Visit the <a href = "http :/ /www. dummies . com" >For Dummies 
site</a> for more information. 
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Mouseover and out 



Current Web browsers support a feature many 
users take advantage of: mouseover support. 
When your mouse moves over a link, the desti- 
nation of the link shows up in the lower-left 
corner of the browser window. (Some versions 
of Internet Explorer have the status bar, where 
the destination appears, turned off by default; 
choose ViewOStatus Bar to turn it on and see 



link destinations.) You can use this mouseover 
support to check your own links when you're 
testing your site, both before and afteryou pub- 
lish it. Rest assured thatyour savvier users will 
take advantage of the mouseover feature to 
check out where a link is going before they 
decide to click it. 



Here's how this tag displays in a typical Web browser: 

Visit the For Dummies site for more information. 

In a typical Web page, the underlined text — called the link text, because it's 
where the user clicks to follow the link — displays in color as well as being 
underlined. 



The other kind of link you commonly create in your Web page is an image 
link. You begin this kind of link with the image tag, <img>. You use the src 
attribute, which nearly always appears within the <img> tag, to specify 
where the image lives. For simple sites, store the image in the same folder as 
the HTML file that links to the image. Then the src option is very simple: 

<img src= "myuglymug . jpg" > 




For more complex sites, you can consider putting images in one or more sep- 
arate folders, and using more complicated links to refer to them. 



Links and URLs 

Links usually fulfill one of two main purposes: to help your user go to another 
Web page, or to bring in a graphics file to display in your Web page. 
Whichever kind of link you're creating, you need to know how to specify 
where the file is located. 
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Most linking mistakes are made due to misunderstandings about the way 
URLs work when you're linking from the HTML file that is the core of your 

k e to another Web page or to a graphics file. Understanding how URLs 
f help you create more interesting Web pages and experience much 
less frustration as you create and test your page. Table 13-1 summarizes how 
you create the different kinds of links. 



Table 13-1 


URL and Web Page Examples 


Location 


URL Web Page 


Graphics 


of Target 


Example 


Example* 


Same folder 


filename <a href=" 


<img src=" 




mycv . html " > 


my face . jpg" > 




text</a> 





Subfolder at 
a lower level of 
the same path 


pathname/ 
filename 


<a href=" 
subpages/ 
mycv . htm" 
text</a> 


> 


<img src=" 

grf x/myf ace . jpg> 


Folder on a 


pathname/ 


<a href=" 


. ./ 


<img src= 


" . . / 



different path filename theotherpage/ sharegfx/ 

otherpage.htm> prof ace. gif> 
text</a> 



Different server, 
home page 
(index.htm or 
index.html) 



domainname 



<a href=" 
http : / /www. 
largedomain . 
com" >text</a> 



<img src=" 
http: //www. 
largedomain . 
com/goodf ace . 
jpg"> 



Different server, Domainname/ <a href=" 
interior page pathname http: //www. 

largess . com/ 
files/bud. 



<img src= 
"http : / /www. 
largess . com/ 
gif s/icon27 . 



htm" >text</a> gif"> 



Linkwithin Anyof <a name="my Doesn'tapply 

a page above + # anchor "></a>; 

anchorname <a href=" 

http: //www. 

largess . com# 

myanchor " >Go 

to my anchor 

</a> 

* This example leaves out the ALT option and other important graphics options, which Chapter 12 
describes. 
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Unking to a file on another sert/er 

easiest kinds of links are actually links to a spot on another Web server, 
cause you can easily get the URL for the link — it's the same as the 
see when you go to the site by using your Web browser. When 
you're linking to a file on a different server than your HTML file, you can link 
to two kinds of URLs: 




i>* Different server, home page: This is the easiest kind of URL: You just 
give the same domain name that you use to go to the home page of the 
Web site, preceded by http : //. For instance, if you know of a racing 
fan's Web site with the domain name http : / /www.mygreenhorse . com, 
you simply give that URL as the hypertext reference. (The home page 
does have a filename — usually index . htm, index . html, home . htm, or 
home . html. However, you only have to spell out the home page's file- 
name if it's something different than those.) 

Different server, not the home page: This kind of URL is easy too; it's just 
the URL, but the URL is a little longer because it includes the http : / / 
prefix and the domain name as well as a path down to the specific file you 
want. There's a twist, though: When you're linking to a file on a large site, 
the URL is often a bunch of gobbledygook. 

For instance, here's a URL from a search for Gumby on the Google 
search site: 

http: / /www. google. com/ search?hl=en&ie=UTF-8&oe=UTF-8&q= 
gumby+show 

Figure 13-1 shows this search and its results. 

The URL is not really a file location; it's a database query stored in a 
URL. Still, this isn't something you need to worry about. Just find the 
page you want, copy its URL and paste it into your Web page, and you 
have an accurate link. (At least, it's accurate until something on the site 
you're linking to changes.) 

You usually don't need to include the filename in the path for a Web page if 
the filename is index . htm or index . html. Most Web authors only use this 
filename for their site's home page, but others use it for major navigational 
pages deeper within the site as well. 

Don't worry if you don't see index . htm or index . html when you visit the 
Web site's home page; the site is automatically remapping the filename from 
the one your browser expects to the one it wants to use. Try typing the site's 
URL without a specific filename; if that works, you don't need to include the 
filename in your link. 
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Figure 13-1: 

Atypical 
search can 
generate a 

long URL 



Google 



Well Imag&s Groups News Froogle "''"' mote . 
|gumby show 



Web 



Results 1 10 of about 63.500 for munli y sh"W . (0.12 seconds) 



Toon Tracker Original Gumby Show Page 
Toon Tracker presents The Original Gmnliy Show Page', a look at Gmnhy's 
early TV appearances with host Pinky Lee The Original Gumby Show ... 
www toontracker.com/rjMinliy/ijtitnliv htm - 9V - i ■•-■[ - E.npiU> }j<a*ih-- 

The Gumby Show 

The Gurnliy Show, Giimhy by Warhol Guinhy by Warhol 24 in. x 36. Framed. 
Gtrmliy Gurnliy 24 in. x 36. Framed Gninhy GMinhy 24 in. >; 36. Framed. ... 

www.pDSter-bargains com/producls/13437 php - 4k - :Usj\ - -iiuii^i | iu^»: 

Gumby - Pictures, Sounds, and Videos 

Gumby Merchandise Lots of Gumby & Pokey merchandise including glow in the dark 
shirts, beanies, and more! ... Enter your email to join the Gumby newsletter ... 

www.everwonder copn/david/giifllby/- 18k- 4 Apr 2304 - Cacned - 5>cn<lai u^up^ 

The Gumby Show - TV Series - TV Tome 

TVTome is your reference guide to The Gumby Show. Episode guide, cast and crew 
information, analysis, polls, reviews and more. Click Here. The Gmnliy Show. ... 

www.tvtome.com/tvtome/sen/let/ ShowfvlainServlet/showid-3743/ • 19k - ■ " ;l v 1 - 3im.l;> 
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Unking to a fife on the same sert/er 

Linking to a file on the same server is harder than linking to a file on another 
server. That's for two reasons: Getting the path wrong when you are linking 
to a local file is easier because you can't just copy and paste a Web URL; and, 
the path you specify while testing on your own machine may change when 
you publish your Web site by moving it to a Web server. This can make the 
URLs you've been using wrong, breaking the links within your site. 

When linking to a file on the same server, don't give the name of the server — 
just leave it off. Your Web browser knows to look on the same server as the 
Web page if no server name is specified in the path. 

If you're linking to a file on the same server as your HTML file, the kinds of 
URLs you can link to include the following: 

v 0 Same server, same folder: If a file is on the same server, and in the 
same folder as the HTML file, you don't need any path information. 
The pathname is simply the filename. To link to a Web page called 
myresume . htm that's in the same folder as your Web page, the path- 
name is just myresume . htm. 
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V Same server, subfolder: If a file is in a subfolder below the HTML file that 
has the link in it, you need to include the path from the HTML file to the 
er holding the other Web page or graphics file. For instance, if you 
a folder containing your Web page and a subfolder, called grf x, 
with graphics files, the path to a graphic called myf ace . jpg is 
grfx/myf ace . jpg. 



Same server, not on same path: Things start to get really tricky if you 
want to link to a Web page or graphics file that's on the same server, 
but on a different path. You can either give the absolute pathname that 
describes the path from the beginning of the server's directory structure 
to the file, or the relative pathname from your Web page to the file. An 
example of an absolute path, on a machine whose main hard disk is 
called maya, is maya/mypage/grf x/yourf ace . jpg. An example of 
a relative path to the same file, from an HTML file stored at maya/ 
mypage/webpages/ index. html, is . . /grf x/yourf ace . jpg. 

Use the characters . . / to indicate going up one level in the current folder 
hierarchy — referred to as the parent folder. It's not very user-friendly, but 
simple enough once you get used to it. 



Unking urithin a page 

There's one more intricacy to pathnames that is easy to miss, but important: 
You can link to a destination within a Web page, as well as to the top of the 
page. 

The only trouble is, HTML doesn't allow you to specify a location within the 
page, using normal language — you can't say "link to the spot just below the 
picture of Britney Spears and just above the picture of Madonna." Instead, 
you need to create a special marker, called an anchor, to link to. 

Technically, any link you create is an anchor, but people typically call them 
HREFs if you're linking out to a Web page, or image references if you're linking 
in a graphics file. The term anchor is used most often to mean a special marker 
you create in an HTML file to give other HTML files a specific spot to refer to. 

To create an anchor, you simply put the <a> and </a> tags into your Web 
page. For example, 



<a NAME="aboveMadonna"x/a> 



You don't need to enclose any text between the <a> and </a> tags because 
the anchor you are creating goes to the start of the next line of text below the 
anchor. There's no visible sign to the user of this kind of anchor — no blue- 
colored text or underlining, for instance. 
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To link to the anchor, you add the # symbol and the anchor name to any 
other kind of URL. Say you put ten anchors into a Web page, one above each 
ader, and number them one through ten. Then a link to the third 
within the same Web page, looks like this: 



Check out the <a href="#three">third</a> wonderful reason 
to vote for me. 



You can now link to the area in the Web page where this line appears by 
adding # three to the end of the URL given after the HREF attribute. 



Atioidinq mistakes 

Making mistakes in your Web site when you're specifying links is easy, and 
"good" links can easily become broken because of changes in the Web site 
you're linking to. Here are some ways to prevent problems, and to manage 
problems when they do come up: 

V Keep your whole Web page in one folder. When your whole site is just 
one Web page, your only links are to the graphics images that display as 
part of your page. Put the graphics images in the same folder as the 
HTML file that defines your Web page. That way, your links to graphics 
files are simple — just the filename — and when you publish the site, 
you just move a single folder from your machine to the Web server. 

Keep your whole Web site in one folder. When you grow your Web 
page into a multipage site, you can keep all the HTML files that define 
your Web pages, as well as all the graphics files they use, in a single 
folder, again simplifying links. This method does get crowded after a 
while, though. 

Here's an alternative for sites with more than a couple of dozen files: 
Create a very simple hierarchy in which each HTML file is in a folder 
with the same name as the HTML file, shared graphics are in a separate 
folder, and graphics used only by a specific page are stored with that 
page. This method is still a whole new level of complexity, but at least 
you have some rules to operate by. 

i>* Avoid internal links to Web pages on other sites. Linking directly to a 
spot within a Web page on another site is fun, but you're depending on 
an anchor that may go away as the Web page is updated. Try to only use 
internal links within your own site; that way, you at least know who to 
blame if the anchor you're linking to is deleted or moved. 

V Check all links before you publish. Before you publish your Web page 
or Web site, try every single page to make sure that graphics load prop- 
erly, and try every single link to make sure it works correctly. If you find 
a problem, make the change while it's still easy — and then recheck to 
make sure you got it right. 
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u 0 Check all links after you publish. Some of your Web links — both links 
to graphics within the Web page and links to other sites — may break 
n you publish your site. Check to make sure. If you do find problems, 
em, test on your local machine, and then republish and recheck. 



V Check all links every couple of weeks. Other Web publishers can easily 
make changes in sites you depend on — and it's a sure bet that the 
minute you decide that the site you link to will never change, it does. 
Keep checking your links every couple of weeks to make sure they're all 
good. (And update any out-of-date content in your site while you're at it.) 



Linking to a Web Page 

Here we summarize the different kinds of links you can create and show you 
how to implement them in both straight HTML and in SeaMonkey Composer. 
Actually, adding a link is quite different when working directly in HTML 
versus working with Composer or other tools. 



Adding Web page links in HTML 

To link to a Web page, just create an anchor tag and provide the path to the 
page you want (and any anchor that applies). Following are some examples: 



Linking to the home page of a site with its own domain name: 

<a href="http: / /www . greatdomain . com" >Go to the great 
domain. </a> 

i>* Linking to a page within a site, giving the pathname and filename: 

Read my review of <a href = "http :/ /www. greatdomain . com/ 
reviews /budspeaks .htm" >the great domain. </a> 

i>* Linking to a page on the same server, and in the same folder, as your 
Web page: 

I've created a <a href ="gdlikes .htm" >Web page</a> 

summarizing what I like about the great domain. 

Linking to a page on the same server, in a subfolder below your Web 
page: 

I've created a <a href="opinions/gdlikes .htm">Web 
page</a> summarizing what I like about the 
great domain . 
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Linking to a named anchor within a Web page: 
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w I don't like some things about <a href = "http : //www. 

greatdomain. com/news /policies .htm#payupnow" >the 
great domain</a>. 



^ In this last example, an anchor called #payupnow has to be on the policies . 
"~ ~ htm page in the News folder of the Web site www . greatdomain . com. If not, 
the user's Web browser takes him or her to the right page, but brings up the 
top of the page, not the desired spot within the page. 



Adding Web paqe (inks in Composer 

Creating a link in Composer can be a bit confusing. Follow these steps care- 
fully to create a link in Composer without problems: 

1. Open Composer and your Web page, as described in Chapter 5. If the 
file is new, save it before proceeding. 

2. Enter the text in which you want the link to appear. 

Enter the text first, before you specify the link. 

mug i 3. Select the text you want to use as link text so that it's highlighted. 

; Don't select the space before or after the text you want to use; it looks 

odd to have leading or trailing empty spaces in a link. 

4. Bring up the Link Properties dialog box by choosing InsertOLink or 
pressing Ctrl+L. Click the Advanced Edit button to make all the 
options show. 

The Link Properties dialog box appears. The text you highlighted dis- 
plays at the top of the dialog box as the link text. 

± You can also enter the link text by bringing up the Link Properties dialog 

"""" ~ box with no text highlighted and then entering the link text in the Link 

Text box. When you're done, the link text appears on your page. 
However, anything you type immediately next to it becomes part of the 
link text, which can be a hassle. 

5. For a link to another site, enter the URL that you want to link to. For a 
link to your own site, enter the URL manually, or click the Choose File 
button, navigate to the file you want to link to, and then click Open. 

Use a relative URL for most links to a Web page on the same server as 
the page that contains the link. See the section "Linking to a file on the 
same server" earlier in this chapter for details on how to compose 
the URL. 
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The URL is Relative to Page Location check box automatically becomes 
checked or unchecked depending on which link location you enter. This 
Ix*^* 011 helps y ou confirm that the link location you enter is absolute or 
\J |\r^tive (as described in Chapter 2 and earlier in this chapter), 
whichever you are trying to use. 

6. If you want to use an existing named anchor within the file you're 
linking to, select it from the Link Location pop-up list. For local files 
only: If the anchor doesn't exist, but you want to create one next to a 
heading, select a heading from the Link Location list. Netscape 
Composer opens the file and creates an anchor next to the heading. 

This is a lot for a free program to do for you! 

Note: If you want to add additional attributes to the link, click Advanced 
Edit to access the Advanced Property Editor dialog box, as shown in 
Figure 13-2. When you're done setting your attributes, click OK to return 
to the Link Properties dialog box. 

7. Click OK in the Link Properties dialog box to accept your settings. 

The appropriate HTML code is added to your Web page. 



Figure 13-2: 
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8. Choose ViewOHTML Source or click the HTML Source tab to check the 
underlying HTML. 

HTML code for your page appears. Check it, using the information 
links earlier in this chapter, to make sure it's okay. 



Every so often, save your Web page to your hard disk, open it in a Web 
browser and test your links. Testing links is one of the most important kinds 
of testing you can do. 



Creating a Mailta Link 

Mailto links are a favorite trick on the Web. The good news is, they're fun to 
set up and fun to use. The bad news is, they don't work for all users. 

A mailto link is a link that is supposed to automatically bring up the user's 
e-mail program and create a new mail message addressed to the e-mail 
address specified in the mailto link. The user only has to fill in the subject 
line of the e-mail message and the content, and then click Send. 

However, many users encounter problems with this scenario. Some older 
browsers don't support mailto URLs. Also, many users don't realize that they 
have to be a bit proactive and have their systems set up correctly in order for 
the mailto link to actually trigger their e-mail package. And finally, some users 
have multiple e-mail programs connected to different e-mail accounts; the 
e-mail program that automatically comes up is not necessarily the one that 
the user wants to use at that moment. 

You also may have some problems. Spammers — people who send unwanted 
e-mail — get e-mail addresses by creating spiders that search the Web for 
e-mail addresses. Any e-mail address that you put in a mailto link may end up 
being harvested and used to send you spam. (This has happened to both of 
the authors.) 




Create a separate e-mail account just for receiving e-mail from your Web site. 
That way, your personal or professional e-mail accounts aren't clogged with 
user mail and spam. Free services such as Hotmail (at www. hotmail . com) 
allow you to create and use an e-mail account at no cost. 

Users can get quite touchy if you ignore their e-mail messages. Make sure to 
check for user mail once a day or so — even if you have to wade through a 
bunch of spam to find it. 
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One solution to all these problems is to not use mailto links and therefore not 
allow any user communication at all. However, we prefer two alternatives: 



te a form. When asking for input, feedback, and so on regarding 
your Web site, consider using a form. A form allows you to structure the 
input from the user, if needed. And with a form, you still get an e-mail 
message, but the user doesn't have to worry about what e-mail program 
(if any) gets launched, and you don't have to worry about spammers 
getting your e-mail address. There is work to do in getting the form to 
work, however. (See Chapter 18 for a discussion of forms.) 

f" Spell out the e-mail address when using mailto. Users whose systems 
are set up in such a way that the mailto link doesn't work usually know 
it. If you spell out the e-mail address, as well as provide a mailto link 
to it, users who can take advantage of the mailto link can click it; users 
who can't take advantage of the mailto link can copy and paste the 
e-mail address into their e-mail program of choice. Figure 13-3 shows 
an example, with the e-mail address budsmith2 001@aol . com marked 
as a mailto link. The following instructions show you how to do this. 



Figure 13-3: 
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Creating a mailto link in HTML 




a mailto link in HTML is easy; it's just like creating a regular link, but 
t have to worry about pathnames or local files versus files on other 
Web servers. Just add a line of text and HTML like the following: 

If you'd like, send e-mail to Bud Smith, one of the 

authors, at <a href = "mailto : budsmith2 001@aol . 
com" >budsmith2 001@aol . com< /a> . 

Just as with a normal hypertext link, you use the anchor tag and the HREF 
attribute. Also like normal hypertext links, you surround the text that you 
want to highlight with the anchor tag in front and the anchor-end tag in 
back. 

Notice that in this example we give the author's e-mail address explicitly, 
along with a link to it. Not only does this allow the user to cut and paste the 
e-mail address into the e-mail program of his choice, it also lets him see 
exactly where he's sending e-mail to before he clicks. In this case, users may 
appreciate seeing what looks like someone's personal e-mail address, instead 
of a generic address like f eedback@budsmith . com or a Hotmail address 
that the author may not check very often. 



Creating a mailto link in Composer 

Creating a mailto link in Composer is just like creating a regular link, only sim- 
pler. Follow these steps: 

1. Open Composer and your Web page, as described in Chapter 9. 

2. Enter the text in which you want the mailto link to appear. 

Enter the text first before you specify the link. 

3. Select the text that you want to use as mailto link text so that it's 
highlighted. 

4. Bring up the Link Properties dialog box by choosing InsertOLink or 
pressing Ctrl+L. 

The Link Properties dialog box appears. The text you highlighted dis- 
plays at the top of the dialog box as the link text. 
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5. For the link location, type mailto: and the e-mail address you want to 
link to, with no spaces. 

creates a link to the specified e-mail address. 

You don't need to look at the other properties for a mailto link; they're 
only needed for links to an anchor within a document. 

6. Click OK to accept the link properties. 

The appropriate HTML code is added to your Web page. 

7. Choose ViewOHTML Source or click the HTML Source tab to check the 
underlying HTML. 

The HTML code for your page appears. Check it, using the information 
about links earlier in this chapter, to make sure it's okay. Then pat your- 
self on the back — you've successfully created a mailto link! 
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In This Chapter 

Minding the principles of good design 

Avoiding design no-nos 

Working with tables, frames, and layout 




m Mne of the trickiest issues in creating and publishing Web pages is creat- 
ing and maintaining the overall look of each Web page. Some pages look 
great. Others look okay. Still others look hokey and amateurish. And how 
good a page looks varies considerably depending on who's looking — after 
all, "beauty is in the eye of the beholder." Up to a point, anyway; some pages 
are so bad, or so good, that everyone agrees on them. 

When you create your first Web page, as described in Part I of this book, it 
really doesn't matter how your page looks. You're just trying to have fun and 
get a little experience. But if you're creating a Web page a lot of people will be 
looking at, or if you're practicing to create a Web page for business or career 
use, you're going to want it to look good. And explaining how to make a Web 
page look good is hard. 

The overall impression a Web page makes depends on many different 
factors — the balance of white space (empty space) to text and graphics, 
the size of text used, the font used, appropriate use of headings versus regu- 
lar text, and appropriate use of bulleted and numbered lists, hyperlinks, and 
other eye-catching elements. Each of these factors has to be "right," but 
"right" is hard to define — you know it when you see it. All the choices you 
make have to work together as a whole. 

It usually takes a professional to make a Web page look really good — so at 
the end of this chapter, we talk about how to get professional help for the 
look of your Web page. But it doesn't take a professional to make your Web 
page look pretty good — or at least to avoid having it be out-and-out ugly. 
We show you how to make sure your Web page looks good in this chapter. 
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n of a Web page can be most simply described as the look of the 
page and how it's perceived by the user — as attractive or unattractive, and 
as easy to use or difficult to use. Design is artistic and aesthetic; getting it 
right draws on people's creativity, and judging when it's right depends on 
people's individual taste. So there are no hard and fast rules that always yield 
a good-looking design. This fact drives some people crazy, but many of the 
most important things in life — like love, fine food, good wine, and good 
design — don't operate strictly by specific rules. 

In our years of work with the Web, we've learned many of the "tricks" of Web 
design. Instead of the specific and formal rules that professional Web design- 
ers follow, we have discovered that following general principles usually yield 
good results for smallish Web design projects. Of course, we do depend a 
great deal on existing professional models that most people agree look good, 
but at carefully chosen times, we like to break the rules. The design process 
is a challenge to anyone's sanity, but we feel that mixing and matching is the 
only way to consistently create designs that look good. 

The design tips in this chapter are based on the authors' experience in design- 
ing and using many Web sites, not on formal design principles. Furthermore, 
our advice is just for people doing single Web pages and small Web sites of 5 
to 10 Web pages — not large sites that have to be planned carefully from the 
beginning. All this means that our advice may be infuriating to professionals — 
but is likely to be very helpful to people just starting out. For detailed informa- 
tion about Web page and Web site design, we recommend Web Design For 
Dummies, 2nd Edition by Lisa Lopuck (Wiley). 

The three most important principles for designing Web home pages and small 
Web sites are simplicity, predictability and consistency. It's necessary to 
follow each principle in order to also follow the others. In the next few sec- 
tions are a few pointers showing how to apply these principles. 



Achieving simplicity 

Simplicity is considered the hallmark of good design. The modern eye is 
trained to look for and appreciate simple, unornamented designs. Use the 
simplest design that accomplishes your task, and then figure out how to sim- 
plify it further. For Web pages, simplicity means using as few of everything — 
design elements, graphics, and text sizes — as is reasonably possible. 

Simplicity has specific advantages in Web design; in fact, the impact of time 
constraints and the differences among users' computer setups make simplic- 
ity a necessity. The fact that it takes time to download each element on a Web 
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page means that a simply designed Web page usually loads faster than a com- 
plicated one, and users really like fast-loading pages. (Actually they dislike 
ing pages, but we'd rather describe the situation in a positive way.) 

ences among users' computer setups reward simplicity as well. 
One user can be looking at your Web page on a small screen with 256 colors; 
another can be looking at it on a large, high-resolution screen with thousands 
of colors. The simpler your Web page design, the more likely the page will 
look about the same on all the different computer setups out there. 




To you as a novice Web page author, simplicity is especially important. You 
don't have the hard-earned experience of having tried many things that don't 
work. You also don't have the technical knowledge to always do things right 
when you're trying something new and complicated. The simpler you keep 
your design, the more likely you are not to mess up. 

Simplicity is most important in content pages, Web pages where the user is 
reading an article or looking at a picture. The user doesn't want to be dis- 
tracted from what he's doing. Figures 14-1 and 14-2 show the first and second 
screenfuls of content for Dreamweaver MX For Dummies on the For Dummies 
Web site. Notice how both Web pages allow you to focus on the content. 
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Figure 14-1: 

The top of a 
Dummies 
content 
page is 
simple, 
offering 
tools, 
navigation, 
and content. 



ZE 



Address jg] http://www.duininies.coin/WileyCDA/DunimtesAitjcle/id 1297.subcal [HJII [i IN G hi ml 



The Online Resource 



"3 Q 6° 



tvervdjy Anvamed .,,,.,.,.„„,, „ 
minimum inniiiiitiin « 




Health 
" mt Mind* Spirit 



Managing Mt 




Doing Business Online 
CntphitsS Animation 
Using Hie Internet 




'->■■ i-.k::- ; i .'H.hnu 'ver- ; A.pp; eci.'jfirKf H I ML F rv-jim:- :. 

Appreciating HTML Frames 

A daptecf From: Dreamwe-wei MXFoi Dummies 

Frame? add innovative navigation control because thev enable you to display multiple HTML 
pages in one browser window and control the contents of each framed area individually 
Designers commonly use frames to create a page with two or more sections and then place links 
In one section that, when selected, display information in another seciion of the same browser 
window 

d^S& Wgjj pages that use frames are split into separate sections - or individual frames. All the frames 
§f'*^**'\ together make up a frameset. Behind the scenes, each frame ofthe frameset Is a separate HTML 
" v L. ) file, which makes a page with frames a little complicated to create, even with Dreamweaver. If you 
choose to create yourframe files in a text editor, you have to juggle multiple pages, working on 
each frame one at a lime, and you can see what you're creating only when you previewyourworkin 
a browser. The visual editor in Dreamweaver makes creating frames a lot easier because you can 
view all the HTML files that make up the frameset at the same time and can edit them while they 
are displayed in the way in which they appear in a browser. 

As a navigational feature, frames enable you to keep some information constant, while changing 
other information on the same page. For example, you can keep a tist of links visible in one frame 

< Internet 
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Goin' for guidelines 

Here's a list of guidelines to follow when using frames: 

• Don't iisefi.iii.es iu ,n "i the sake of nsin<j frames. If you have a compelling reason to use 
frames, then create an elegant and easy-to-follow frameset. But dont do it just because 
Dreamweaver makes it easy to do. 

• Limit the use of frames and keep files small. Remember that each frame you create 
represents another HTMLfile. Thus, a frameset with three frames requires a browserto display 
three Web pages, and that can dramatically increase download time. 

• Turn offfiame hordeis. Newer browsers support the capability to turn off the borderthat 
divides frames in a frameset. If the section has to be scrollable, the border is visible no matter 
What But if you can turn the borders off, your pages look cleaner. Frame borders are thick and 
an ugly gray in color, and they can break up a nice design. Use them only when you feel that 
they're really necessary. 

• Dont use fiames when tables are better. Tables are often easier to create than frames and 
can provide a more elegant solution to your design needs because they're less intrusive to the 
design 

• Dont place frames within fiames. The windows get too darned small to be useful for much of 
anything, and the screen looks horribly complicated. You can also run into problems when your 
framed site links to another site that's displayed in your frameset. 

• Put in alternate <NOFRAMES> content. The number of users surfing the Web with browsers 
that dont support frames becomes smaller everyday. Still, it's a good idea to show them 
something other than a blankpaqe. I 
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Producing predictability 

Predictability means that the user can easily guess where things are on your 
Web page and how they work. In other words, one of your goals as you design 
your Web page is to achieve a sense of predictability of the content, layout 
functionality, and look of your page when it's compared to other, similar 
Web pages. 

An important reason that the Web is so popular is that Web pages nearly all 
look and work alike. Web pages that go too far from the norm tend not to be 
very popular with users. 

Part of the reason this book is called Creating Web Pages and not Creating 
Web Sites is that it's focused on people just starting out, who are likely to 
want to create a single Web page first, and then perhaps expand that page 
into a small site. But another reason is that users really do experience the 
Web as a bunch of individual Web pages. Tests show that many users aren't 
even aware, when they click a link to a different site, that they've left one site 
and gone to a different one. People really do experience the Web one Web 
page at a time. 
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To understand the value of predictability, imagine what a Web page with a 
newspaper article on it should look like. The first thing to catch your eye may 
— almost always one picture, if any You'd also expect to see the 
describing the article and the reporter's byline. 



You would expect to see some navigation at the top of the screen or along the 
left side. You'd expect a banner ad across the top (but you'd be pleasantly 
surprised if there wasn't one.) The rest of the left side would then be empty 
below the navigation area. The right side may be empty as well, or have some 
small ads. 

On some sites you may see features, such as a button for e-mailing a copy of 
the article, somewhere on the first screen of the article. And you may also 
see a box with headlines for related articles. Figure 14-3 shows a sketch of 
what the major elements in an article page might look like. 



Navigation and Branding 



Figure 14-3: 

Diagram of 
a typical 
article page. 
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Now imagine if one or more of these features was present but was implemented 
much differently than on other sites. For instance, imagine that the button for 
e-mailing the article was labeled "Transmit Content." You'd be frustrated and 
confused. The clever person who put an original label on the button hasn't 
impressed you — he has just made the page harder to understand and use. 
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That, in a nutshell, is what predictability is about. For any Web page you 
create, find a few examples of pages on the Web that accomplish something 
what you're trying to do. See whether your page is similar in con- 
ut, functionality, and (while you're at it) compare the simplicity of 
your design to the examples you've chosen (see "Achieving simplicity," ear- 
lier in this chapter). If your page is different, consider modifying its design to 
reduce or eliminate the differences. That's predictability. 



Creating consistency 

Just as every Web page you create should be predictable when compared to 
the other pages out there on the Web (See "Producing predictability," earlier 
in this chapter), each page should also be internally consistent. You shouldn't 
dramatically change fonts, text size, or layout style within a page. 

If you create a multipage Web site (as described in Chapter 15), all the pages 
in the site should be consistent with each other as well. Do all you can to 
help users understand that they're visiting a single, unified Web site. 

If your Web pages are simple, and if they're predictable to experienced Web 
users, consistency becomes one of the easier principles to follow. Here are just 
a couple of ideas that can substantially improve the consistency of a small site: 

f* Use a repeated navigation block or graphic on each page in your Web 
site — always in the same position on each page. 

is* Use a consistent background color and foreground color, the same text 
size for body text, the same or similar image placements, and the same 
"voice" in the site's writing. 

If you create a large Web site (over 20 pages or so), consistency becomes 
more difficult. The only foolproof way to maintain a consistent approach is to 
create a template for each of the different kinds of pages on your Web site: 
navigational pages, content pages (with and without images), forms pages, 
and so on. Then every page in your site is created from a template and then 
customized for the specific needs of that page. Most really large sites, such as 
Amazon.com, and most blogging sites automatically "populate" templates 
with content drawn from a database to create individual Web pages. 



Avoiding Common Design Mistakes 



Simply cruise the Web — especially areas with lots of personal pages, like the 
GeoCities site or AOL's Hometown area — and you can find many examples of 
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badly designed pages. But what is it that makes these pages bad? Of the 
many design mistakes you can make, three are common among new Web 
caba-o^ators: slow-loading pages, ugly color combinations, and small text. 



This is the number-one bane of Web page design, whether amateur or profes- 
sional. People think they're designing a magazine and throw large, uncom- 
pressed graphics around, several per page. Then they add cute little design 
elements, each of which has to be sent as a separate file by the Web server. 
As each of the different elements comes in, the page's content may shift and 
shimmy in a manner guaranteed to cause motion sickness. When a page of 
yours loads slowly, it's usually due to the fact you are committing one of two 
major errors. 

i>* Error # 1 involves a lack of care with one or two individual graphics. By 
keeping these graphics files large, you doom the whole page to slow 
loading. Use the techniques described in Chapter 12 to make your 
graphics small in their physical size as well as in their file size. 

Error #2 is to use graphics in a profligate manner in general. Highly 
designed pages can have lots of little graphical elements that cause 
many separate file transfers as the page loads. Unless the page is care- 
fully designed, the page actually shifts a bit as each graphic comes in. 
The overall effect can be quite disconcerting. 

Graphics not only can cause your page to load slowly — they also take a long 
time to create, tend to have copyright problems, and present challenging 
design and page layout issues. Keep the use of graphics on your page simple 
until you get really good at designing with graphics, or until you can get help 
from someone who has that talent themselves. 



Many Web page publishers don't much care if the color combinations they 
use are attractive or not. Others care, but can't critically appraise their own 
work and see how ugly and/or difficult to use the result is. 

You may understand that certain color combinations can be ugly, but maybe 
it seems odd for us to say that bad colors can lead to difficult-to-use pages. 
The reason is that on the Web, color identifies hyperlinks, with unused links 
and recently used links having different colors. The standard colors for links 
are blue for unvisited links and purple for visited links. If you change these 
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colors, or use the link colors for other purposes, your visitors have trouble 
identifying which links they've visited and which links they haven't. If you've 
section about creating predictability on your page, you are aware of 
major a sin this is! 





If you simply must change the link colors, try to use color combinations that 
are analogous to the standard ones — a lighter, eye-catching color for unvis- 
ited links, and a dull color for visited ones. This is at least similar, conceptu- 
ally, to the standard colors. Then test the design on a few people and see if 
they can quickly figure out which links are which. 

Now, back to ugly. Just because the Web makes it possible to use various 
color combinations doesn't mean you should do so. Black text on a white or 
off-white background is what people are used to, and is always the safest 
choice. And with this combination, the standard link colors show up really 
well. You can use a graphical bar at some consistent location on the page to 
give your Web pages a colorful, graphical look without sacrificing predictabil- 
ity and readability within the body of each page. 

A few other color combinations work fairly well, but many don't. Remember 
also that some users run their monitors in 256-color mode and that only 216 
colors out of the 256 — the Web-safe color palette — are the same on PCs 
and Macs. So a color combination that looks good on your system may look 
poor on a system with fewer colors; likewise, colors that look good on a PC 
may not look so hot on a Mac. Use the Web-safe colors described in Chapter 
12 to choose, or cruise the Web looking for an existing Web page that uses a 
good-looking Web-safe color combination; you can use the same combination 
for your own site. (This isn't stealing — there are only a few such useful com- 
binations, so the person you're borrowing from didn't exactly invent the elec- 
tric blender either.) 



Smatt text (and targe text, too) 

A common mistake people make is to use small text on their Web pages. 
Small text does look kind of cool, and it allows you to pack in a lot of informa- 
tion. Because of these temptations, even large Web sites, such as early ver- 
sions of the Microsoft site, have made this mistake. The trouble is that small 
text becomes very small text when viewed on a high-resolution monitor. So 
small, in fact, that many of the people who visit your Web site may not be 
able to easily read the text on your page. 

Less common, but equally harmful, is text that's too large. You don't need to 
design Web pages with text that's readable from 20 feet away. Really. (People 
with true vision problems switch Windows and/or their browser to display 
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text in extra-large size, so they have a way to read text that starts out normal 
size.) Large text looks awful, especially when viewed on a system with rela- 
resolution, such as 800-X-600 resolution. 



Both of these problems are made worse by the increasing tendency to embed 
much of a site's text in graphic images. This text always has a consistent look, 
because it's treated by the browser as a graphic image, but that look can 
easily be too small or large. When you save text as image files, the text can't 
be resized by the browser to accommodate different browser settings. So the 
user can't fix any problems they're having with graphically displayed text. 

So what's "normal-size" text? Glad you asked. There's not one exact normal 
size, but there's a normal range. To find it, match the text size in your Web 
page to the text size in a few Web pages you like. Then ask several people — 
not all younger and hawk-eyed, nor all older and less visually acute — to tell 
you if they can easily read the text while sitting comfortably a couple of feet 
from the computer. If not, fix the problem before it becomes a burden for 
your Web site visitors. 



Breaking the Rules Safety 

A lot of the fun in creating your own Web page is doing what you want to do 
and not what someone else tells you. Yet you want your Web page to look 
good. How can you create a design that you like and that also looks good to 
other people? 

We suggest you follow this five-step process: 



1. Get your Web page up. 

Include the content and images you want, as we describe in Part I of this 
book. Don't worry much about how it looks. Just do it! 

2. Find a model page or two that you like. 

Look for pages that have a similar purpose and content. Make sure that 
they have a simple, attractive appearance. See the sidebar, "Finding 
great home pages," for places to look. 

3. Create a new, basic version of your Web page, using these models as 
your guide. 

Get the major pieces — the main text, an image or two, and a list — in 
place first. Make this basic page look good. 
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4. Add additional elements one at a time. 

By working in this piecemeal fashion, you can prevent your page from 
ming a hard-to-fix mess, while still indulging your own creativity. 



5. Publish the result and get comments. 

Let some friends and colleagues see your newly published page, and ask 
them what they think. Let the site sit for a couple of days, and then take 
a fresh look at it yourself. Use your own fresh perspective and the com- 
ments you get to improve your page further. 

You can repeat this process again and again as you improve your Web page 
and add new pages to create a full Web site. Work through these steps consci- 
entiously and you may end up with some of the best-looking Web pages 
around. 



Finding great home pages 



Here are several places you can look to see 
how others have designed their home pages on 
the Web: 

GeoCities: As mentioned in Chapter 2, 
GeoCities is the top provider of home pages 
forthe Web. From the GeoCities home page 
at www.geocities.com, you can 
access GeoCities Web pages in many dif- 
ferent categories. However, there's no 
"best" or "highly rated" list to help you find 
the best Web pages. You're going to have to 
look at a lot of ugly ducklings before you 
find a swan. 

i"* Tripod: Tripod is a free Web hosting com- 
pany acquired by Lycos, a leading interna- 
tional Web portal. Visit Tripod at www. 
tripod.com. To see cool Lycos Web 
pages, look in the Member Spotlight area in 
the Member sites area. The Home and 
Family area is particularly relevant for per- 
sonal home pages. 

AngelFire: AngelFire is the other free Web 
hosting company acquired by Lycos. You can 
find its home page atwww.angelf ire. 



com. Clickthe Cool Pages linkonthe leftside 
of the home page to find links to top sites in 
various areas. 

*<" Hometown: Hometown is the name of AOL's 
free Web page hosting site (see Chapter 4). 
You can use Hometown even if you're not 
an AOL member (although only members 
can use all of the AOLdiscussion areas and 
online help that make Hometown a real 
winner). The Hometown home page at 
www . hometown . aol . com has a list of 
the most popular categories, but you have 
to search all the home pages in a category 
to find the best ones. 

v" Homestead and Bigstep: Homestead and 
Bigstep no longer offerfree personal home 
pages — they only offer business pages, 
and you have to pay for them. But because 
they offer a lot of support, they have some 
great Web pages, and each prominently 
features some of their customers' better 
work. Go to www. homestead . com and 
www.bigstep.com and look for cus- 
tomers' sites. 
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Book /ork with a Web graphic 

designer, while keeping your costs under con- 
trol, is to create your Web site yourself first. 
Then bring in the designer just to improve the 
look of the site. Improving the look of your site 
maytake the designer a few hours and cost you 
several hundred dollars. Money well spent, if 
your Web site is going to be part of your career 
or your business. 

The problem is thatmany of the people you talk 
to will be accustomed to doing the whole job of 



brainstorming your needs with you, creating 
content, revising it all to meet your needs, pub- 
lishing the site, and then modifying it for you. 
This kind of project could cost you thousands of 
dollars — which you're going to avoid spending 
by doing nearly everything yourself for free by 
using the information in this book. The one part 
where you may need help is in getting the look 
right, so do all the other steps yourself and then 
bring someone in just for the graphic design 
piece. 



Usinq Tables and Frames 

Whether and how to use tables was, for a long time, one of the most contro- 
versial topics in Web page design (not exactly an area where controversies 
have earthshaking consequences, but we all need some excitement in our 
lives). The original purpose of tables was to allow Web designers to create 
tables of data (for instance, the monthly sales of several products). 

Nowadays, people often use tables to manage the entire layout of a Web page. 
Designers have found that they can make the cells of a table very large and 
put large graphics or whole blocks of text in them. You can even automatically 
resize tables to accommodate the various sizes of Web browser windows — 
at least, up to a point. We only touch on this advanced use of tables in this 
section. 

Frames are more powerful layout devices than tables, but they have fallen 
into some disfavor. They allow separate parts of the Web browser window to 
be updated and scrolled separately. However, they produce odd effects; users 
seem to prefer one unified window to separate "panes" within a window. So 
we barely mention frames in this book. 



Creating simple tables 

When used as intended, tables have rows and columns. For each spot where 
a row and column intersect, you have a table cell. Each cell can have its own 
formatting — the data in it can be aligned left, center, or right, formatted, and 
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so on. Tables also have header data cells, in which you put the column head- 
ings. Here's the HTML code for a simple table of this type: 



of 



BORDER=2> 

fe><B>Production (tons) </Bx/THxTHxB>% 
goal</Bx/THx/TR> 
<TRxTDxI»North 40</Ix/TDxTD>87</TDxTD>102%</TDx/TR> 
<TRxTDxI>South 40</Ix/TDxTD>93</TDxTD>110%</TDx/TR> 
</TABLE> 



Figure 14-4 shows how this simple table looks in HTML and when viewed in 
Internet Explorer. 



Here's what each part of the HTML code does: 



<table border=2> The table tag begins and ends the table. The 
border attribute creates a 2-pixel-wide border around the table. Don't 
forget to include a border, so other text and graphics in your Web page 
don't crowd too close to the table. 

<tr>, < /tr> Begins and ends the table row. 

<TH>, < /th> Surrounds table header data. Table header data is auto- 
matically formatted as bold and centered. 

<td>, </td> Begins and ends the table data item. 



Figure 14-4: 

A simple 
Web table 
and its 
simple 
HTML 
source. 
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So creating a table in HTML is fairly simple but also fairly tedious. You just 
create the rows and data items; if you get the data items right, the columns 



Getting the data items right can be a problem, though. To make your table 
look just right, you have to use a number of alignment and formatting 
options. Making mistakes becomes very easy, and updating the table's 
appearance becomes very hard. That's why so many people use an HTML 
editor like Composer to create and manage tables — and then, in some cases, 
do final tweaking in HTML to get them just right. 



When tables were added to HTML, Web designers quickly figured out how to 
take them to a whole other level. Imagine making a Web page one big table. 
Using HTML options, you can suppress the display of the table's cell borders. 
You can thus create a large, invisible grid into which you insert chunks of text 
and graphics. This allows you to create a layout with columns. You can also 
use tables in this fashion to make sure that a specific block of text stays next 
to a specific graphic, even if the user makes his Web text large or makes the 
window extra narrow. 

Believe it or not, this whole table for layouts thing was a bit controversial at 
first. Why? Because there were some idealistic motives behind the original 
design of HTML, such as having Web pages be able to display on just about 
any screen. Table-based layouts, by contrast, only work well on screens of at 
least a certain minimum size, such as a PC screen rather than, say, a mobile 
phone screen. The controversy has now largely faded because the people 
who pay for Web site development demand that their sites look good on most 
of the PCs and Macs out there, and tables are just about the only way to 
create a complex design that looks good. 

For the purposes of designing your own Web page, the key word here is 
"complex." There are so many different elements that you have to adjust in 
table-based page design that you need to invest a lot of time and energy to 
learn how to effectively use tables for layout purposes. And then a whole 
other set of issues arise about making sure your table-based page design 
works well on most or all of the current computer systems and Web browser 
setups that are in use. 

Figure 14-5 shows the home page of Netsurfer Science, which uses tables to 
create a simple, clean layout. The column on the left is one big cell in a table; 
the content in the middle and right of the page is in another large cell. Use 
the ViewOSource or similar command in your Web browser to view the 
underlying HTML source for this page to see how it's done. 




Using tables for layout purposes 
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Figure 14-5: 

Netsurfer 
Digest uses 
tables to 
organize 
content. 
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To create your own tables, you can get started by using the InsertOTable 
command in Netscape Composer. However, you really need a more advanced 
tool to work effectively with tables in your Web pages — something like 
Microsoft FrontPage or Dreamweaver, both of which give you more direct 
control over specific options. Of course, your other option is to start doing a 
lot of experimenting in HTML until you learn how to get things just how you 
want them. 

For details on how to use tables for layout, start with this article: www . 

anownsite . com/web-design/html-tables .html. 



Friends don't let friends da frames 

Frames, like tables, are a Netscape innovation. Frames divide a Web page into 
separate areas, which you can then update individually as needed. For exam- 
ple, you can click a link in a frame in the bottom half of a Web page and 
update it with new content while the other frame stays unchanged. This 
seems like a powerful capability. However, frames have proved to be less 
popular than tables. 
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Why are frames not as popular as tables? Well, frames are hard to create and 
manage, just like tables. But advanced Web authors are willing to do just 
,ything to make their Web pages more attractive and more useful, 
s help them do so. With frames, the trouble comes with the "useful" 
part; users have a hard time with framed Web pages. 



For example, when browsing a framed page, users sometimes have difficulty 
finding where the cursor is. If the user moves the scrollbar, which frame 
scrolls? Also, going forward and backward in a frame is different from going 
forward and backward in the overall Web page, so users may get lost easily. 
And printing a framed page properly requires extra steps — users often try to 
print the page and end up printing the contents of just one frame instead. 

Finally, frames create a functional problem or two. When users resize a 
browser window, framed pages don't always resize correctly. And designing a 
framed page to work well for various monitor sizes is significantly harder 
than designing pages with tables embedded in them. 

Usability tests have shown that users are confused by frames. Some highly 
controlled framed sites (for instance, those with only one scrollable window) 
give fairly good results. However, the main purpose of frames on such sites is 
to allow complex navigation, advertisements, or both to stay in the user's 
view at all times. Unless you have complicated navigational options that your 
users can't live without, or unless you have advertisers for your site whose 
dollars you can't live without, we recommend you avoid frames while creat- 
ing your initial Web pages or simple Web site. 

Still, framed pages can be useful to show complex sets of data and to support 
navigation. Because creating and managing the HTML for frames is even 
harder than for tables, we don't describe that process here. 




Netscape Composer doesn't support frames. Use an advanced Web page tool 
such as Microsoft FrontPage or Macromedia Dreamweaver if you want to use 
frames in your pages. (Or look up the appropriate HTML tags in Appendix B 
and start experimenting!) 
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In This Chapter 

Creating your Web pages 
Planning your Web site 
Publishing your Web site 
Creating navigation 
Getting the word out 



50 far, this book has focused on creating individual, separate Web pages. 
In this chapter, we tell you how to tie several different Web pages together 
into a multipage Web site. However, it's good to keep your focus on each indi- 
vidual Web page even as you combine them all together. 

Users of your site are always able to leave for any other site or page on the 
Web. If you make sure every Web page you put up is interesting, fun, and 
attractive, as described throughout this book, you'll end up with a strong 
Web site. 

The terms Web page and Web site are used very similarly. In this book, we 
use the term Web page to refer to a single Web page consisting of an HTML 
document and the graphics that go with it. We use the term Web site to refer 
to an area on the Web consisting of multiple Web pages tied together by 
shared navigation. 



Creating \lour Web Pages 

It's typical, when designing a Web site, to use a top-down approach and to start 
by thinking a lot about navigation, organization, navigation, and so on. (We 
mention navigation twice because it's such a big concern when you're creating 
a large Web site.) But for a small Web site, we say go from the bottom up — 
building the site from carefully crafted individual pages. 
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Your approach to creating Web pages for a small Web site should be similar 
to_your approach to creating a single Web home page. Each page should 

pne as a worthwhile place for your Web visitors to spend time, learn 
|ig, or have some fun. 



Getting yow pages right 

Think of each Web page as a separate "information asset." Why would people 
want to come to your Web page? What would they take away from having 
seen it? Is there anything about your page that may make people come back, 
or want to encourage someone else to visit? Most of us have enough to say to 
easily create a single Web home page that our friends, family, and colleagues 
find interesting. But it takes extra work to make each Web page in a multipage 
site valuable to people. 

One of the best ways to create a strong Web site is to first create each Web 
page separately. Make sure that each page has the information you want, that 
it downloads in a reasonable amount of time, that all the links work, and that 
the page looks good. Then use the information in this chapter to add naviga- 
tion and make your Web pages into a unified Web site. 

What about consistency? Consistency is important within a Web site, but not 
that difficult to achieve if your site is only a few pages to perhaps a dozen 
pages in size. Use the same background color, text color, font, and text size 
throughout your pages. If you use standard HTML headers, bulleted and num- 
bered lists, and a few small images to break up your text, your pages will 
have a consistent appearance. 

Figure 15-1 shows a Web page from within the Netsurfer Science Web site cre- 
ated and managed by one of the coauthors (Bebak). Note how the page uses a 
simple design, which is repeated throughout the site. (Visit the Netsurfer pages 
at www. netsurf . com to see for yourself.) The Netsurfer Science site is a good 
example of the effectiveness of simple, clean design across a Web site. 

In addition to a standardized design across pages, the other elements that 
make a site consistent are predictable, understandable Web page addresses 
and repeated navigational elements throughout the site. The next section 
explains how to achieve these qualities in your site. 

You may want to take the design consistency of your Web site to another level 
by adding repeated graphical elements and a strong, consistent approach to 
layout across all your Web pages. This is the approach taken by the pros. We 
suggest that, unless you have some design experience, you first create the 
site's pages and navigation. Then work on improving the overall design after 
the site is up and working. (This is also the approach taken by the pros!) 
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Netsurfer 
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Planning Versus pushing ahead 

You can take two approaches to your role as a Web site publisher: the sponta- 
neous approach favored by someone like Captain Kirk, the risk-taking leader 
of the Starship Enterprise in the original Star Trek TV series and movies, or 
the careful approach favored by the more logical Mr. Spock. The spontaneous 
Captain Kirk approach can be summarized in the well-known Nike slogan 
"Just do it." You can get a simple site up on the Web with just a little more 
work than doing a single Web page. 

If you're trying for a more complex Web site, such as a Web site for your busi- 
ness, you'll want to take a more careful approach. In contrast to Captain 
Kirk's quick-and-dirty approach, Mr. Spock's more logical method requires 
you to do the following: 

*** Set goals for your Web site. 

Plan the contents of your site to meet those goals. 

v 0 Create a storyboard of your site — a sketch of each page, or at least of 
the most important pages — that specifies what will go on each Web 
page and how you want the pages to fit together. 
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Compare your planned site to similar or competing sites and revise your 
plans accordingly. 



te your site on your own machine first and test it thoroughly. 



Carefully choose a Web service provider that will do the best job of host- 
ing your site. 

**" Get your site up on the Web and begin an ongoing cycle of testing and 
revision. 



Whew! That's a lot of Tribble — we mean, a lot of trouble! 



Either the spontaneous or the careful approach is just fine, but you should 
match your approach to what you want to do on the Web. We recommend 
that you try the spontaneous approach first. Don't put out a great deal of 
effort, and don't use your initial page to try to start a Web-based business 
empire. Just create a personal or business home page that says something 
about you or your organization. 

If you don't own or run your organization, make sure that you have the per- 
mission you need before putting up a Web site that represents the organiza- 
tion. Otherwise, you could find yourself on an unexpected, rapid transition 
off your current career path. (The Monster job search database at www. 
monster . com is a good example of a fun Web site — and is a great help in 
looking for a new job!) 

If that one page is all you ever publish on the Web, that's fine. A lot of the fun 
of being on the Web is seeing the Web pages created by individuals who are 
just trying to have fun and share their interests. Whether you go on to create 
a Web presence for a business or even create a Web-based business of your 
own, the experience that you get when you "just do it" may prove invaluable. 
Table 15-1 suggests when to use the careful versus the spontaneous approach 
to Web publishing. 



Table 15-1 


The Kirk (Spontaneous) and Spock (Careful) 
Approaches to Web Publishing 


Have Learn Now Small Larger Web-Based 
Fun for Advanced Business Web Business Web Business 
Work Later Presence Presence 


Spontaneous 


XX X 


Careful 


XXX 
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Planning qow Web site 



i tools you need for this part of the Web publishing process are Web 
or doing research, and a word processing and drawing program, or a 
pencil and paper — whichever is more comfortable — for sketching your 
plans and taking notes. A few extra hours upfront can save you a great deal of 
time later and help you produce a better Web page; yet the planning step is 
the most frequently overlooked part of the Web publishing process. To plan 
your Web site, follow these steps: 



1. Determine the purpose of your site. 

Decide which type of site you want to create: personal, topical, commer- 
cial, or comical. (We could also call the last two "business" and "enter- 
tainment," but those don't sound as nice together.) 

After you decide what type of site you want, research existing sites; then 
research other media that serve the same purpose (magazines, 
brochures — even television). Ask yourself what it is about your mater- 
ial, or about the Web, that makes the Web a good way to get your mater- 
ial out. Think some more about your own needs and interests. Then 
write a few goals for your initial site and for later versions of it. 

2. Decide on the structure of your site and the layout of your pages. 

The structure of your site can help guide visitors to the parts that inter- 
est them most. A great layout of your site's Web pages can make the 
pages more useful, more interesting, or more entertaining, depending on 
their purpose. Here are a few general rules: 

• Decide how many pages to have and how they link to each other. 

• Put the purpose of your site near the top of your home page. 

• Indicate the purpose of each additional page near the top of that 
page. 

• Use headers, bullets, icons, and other graphical or emphasis ele- 
ments to highlight key points. 

• Think about what graphics you need. Start the process of generat- 
ing or obtaining them. 

• Use summary elements, such as a site map and a Frequently Asked 
Questions (FAQ) page. 

• Put navigational elements — links from your home page to other 
pages in your site, and from other pages back to the home page — 
in a consistent spot at the top or bottom of each page. 
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3. Decide which links to include. 
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A Web page that has no links is generally pretty boring. You already 
ded in Step 2 which links to include between the pages in your site, 
think about which links to include from your pages out to other 
sites. Which links make sense? Which links are fun? Use Web search 
engines such as Google (www. google . com) to search the Web and find 
suitable links (see Figure 15-2). Then check the links and cut the list 
down to the personally significant ones, not just a laundry list (unless 
you're making a list of laundries). Create a place to save links that you 
run into while using the Web so that they're readily available when you 
make updates to your pages. 

Now think some more. Do the links that you're including fit the purpose 
of your page? How can you organize them? Should you group sets of key 
links together? Are some of the links repetitive or superfluous? Getting 
your links right makes your site more useful. And although no one likes 
to be left behind, which is what happens to you when people click an 
outbound link in one of your pages, a good set of links can, paradoxi- 
cally, make users more likely to return to your site in the future. 



Make sure to check your external links frequently - 
soon have several broken links on your site. 



■ otherwise, you can 



"3 Google Search: creating web pages - Microsoft Internet Explorer 



File Edit View Favoiites Tools Help 



Figure 15-2: 

Don't get all 
Google- 
eyed while 
searching. 



B | X 



Back ▼ '^J » |J<j , Search Favorites f^'' Media lp 



Address [Sj" hUp://www.google.com/seaich?hl=eniie=UTF-8Soe=UTF-8Jq=cieating+web+pages 



Google 



We I) Images Groups News Ftooqle r '*-" 1 more >■ 



|cre ating web pages 



Search | ff™™ tt ^" rch 



Web 



Results 1 - 10 of about 4.970.000 for clearing web pages (0.30 seconds) 



Writing HTML 

... Why Create Web Pages? ... Objectives. This tutorial covers the steps for writing 
HTML files using illustrative examples for creating wel> pages. ... 

www mcli dist maricopa.edu/tut/ - 19k • Cached - Similar pages 

Lessons 

... Dave Siegel's Web Wonk will show you how to create artful web pages that 
look like 

no other web pages you have seen (except for those that mimic the style!), ... 

www.mcli.dist.maricopa.edu/tut/lessons.html - 11k - Cached - Similar pages 
[ tvlnre ;fiuil : . frn,-,-, ■.■■y.-y/ mi:h diit iridtKr.; : ] 

Creating School Web Pages with FrontPage Editor 

Loogootee Elementary West Home Page, Web Page Development. Tutorial on Creating 
Web Pages with FrontPage Editor©. Tammy Payton. ... Creating Your Web Pages. ... 

www.siec.k12.in.us/~west/online/welisite/ • 6k - Cached - Similar pages 

Creating Web Pages (Introductory Level) Therne Page 

... menu page provides links to Information Technology curricular resources and 

instructional 

materials (lesson plans) in the specific topic of creating web Danes. ... 
■z j Done 



Sponsored Links 

Web Content That Works 
Write compelling, usable content 
for web-sites and intranets 

www pacificblue.co.uk 

Create Your Own Web Page 
No HTML or programming skills 
needed. Free 30 day trial. Assoc. 
packages.homestead.com 

Create your own Website 

Lycos Tripod offers you the chance 

to buitd your website for free 

http://www.tripod.lycos.co.uk 

Creating a Web Page 

No programming. Includes everything 

domain, hosting, ecommerce, builder 

www SiteRightNow.com 



Internet 



Chapter 15: Creating a Full Web Site 2(5 7 



DropBocfe 



Creating the content 



content is the part of the Web publishing process where tools come 
eed tools to create HTML-tagged text (or a word processing program 
or text editor if you want to work in HTML directly) and graphics tools to 
create graphics and convert them to one of the common Web formats, GIF or 
JPEG. (Yes, you can use other file formats for Web graphics, but, as we say in 
Chapter 12, GIF and JPEG are the only formats that are widely supported by 
all browsers.) For simple sites, one person can do all the work (but it is a lot 
of work); for creating and maintaining larger sites, you need a team of people, 
often including consultants who have HTML expertise and other skills. 



Follow these general steps to create content for your Web site: 



1. Type up the text for your pages. 

The best thing to do here, if you're new to Web publishing, is to work in 
a word processing program without putting in HTML tags, at least at 
first. That way you can use a familiar tool to get the text right. You can 
achieve much more precise formatting in a word processing program 
than you can in a Web page. 

Don't forget to run the spell checker! 

If you've already created a Web home page in HTML or a Web editing 
tool such as SeaMonkey Composer, as we describe throughout the book, 
you can use the same techniques for your Web site. 

You may want to consider going an extra step and creating a dummy 
of your Web site — pun intended — in your word processing program 
before you commit to HTML. Making a dummy (a printer's term for a 
mock-up of a printed page) is a good way to plan what's on each page, 
and you can insert graphics and simulate links by underlining text and 
changing the color of fonts. Compare your model to relevant Web sites 
you admire and see what changes you want to make. 

2. Convert the content to HTML. 

Next, you need to convert the content to HTML. You can add the HTML 
tags yourself (see Chapter 8), use HTML conversion capabilities built 
into your word processing program, or use a Web page editor (like 
Composer, first described in Chapter 9). You may well end up using a 
combination of conversion methods for new content and for files that 
you use or adapt from various sources. 

Read Chapter 8 to find out how HTML works. Even if you use a Web 
authoring tool to create your Web page and don't put in the HTML tags 
yourself, knowing what is (and isn't) possible in basic HTML saves a 
great deal of time and effort in the overall publishing process. 
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3. Create the graphical elements in your pages. 

i— * ■ Graphical elements often take a long time to create, so start early. They 

J 1T\ f\ f \ L^ilQude not just photos and computer-generated images but also mast- 

' >^ K-' >^ ' \Rwr1s, separator bars, and icons. 

4. Incorporate any multimedia that you want to add. 

This is also the time to create multimedia elements, such as sounds or 
video clips, if you really want to push the envelope. We cover these 
elements in Chapter 17. 

5. Add navigation and test it. 

As we describe later in this chapter, you have to add navigation to make 
your separate Web pages into a site. Then you'll be ready for the next 
step — publishing your site! 



Publishing yow Web site 

Publishing your site — either on an intranet or on the open World Wide Web — 
is the most exciting part of the Web publishing process. (But watch out! Your 
excitement may quickly turn to anxiety as you think of people actually looking 
at your carefully crafted baby.) For this part of the process, you don't need any 
tools, except possibly an FTP (File Transfer Protocol) program to move your 
files to the Web server (as described in Chapter 16). Usually, whoever is pro- 
viding your Web hosting service supports this process. 



Consider using non-English Web pages 



One of the most limiting factors to the spread of 
the World Wide Web is that it's largely in 
English. This situation is changing: many larger 
sites offer their services in several languages. 
But the amount of non-English content is still a 
minority of the content on the Web. 

To create Web pages, you need to know enough 
English to figure out and use HTML and Web 
tools. But what about your audience? 

First, find out how many people in your target 
audience speak a specific language and how 
many of them have access to the Web. Then con- 
sider the cost of translating your content into 
each language thatyou're interested in. Compare 
that costto the size of the potential audience. 



Be optimistic; having native-language content 
distinguishes your site. You're better off having 
the Web's best list of movies in Farsi (Iran's pre- 
dominant language) than yet another list of 
movies in English because your site will be a 
standout. 

At the least, if you have printed materials 
already translated into other languages, either 
put those materials on the Web or publicize 
them onyoursite. In some languages and some 
areas of information needs, using non-English 
languages on the Web offers the same kind of 
ground-floor opportunity that the Web as a 
whole offered when its popularity started about 
ten years ago. 
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First, bring the elements of your site together, test it on your local machine, 
and finally publish it! Here are the steps for publishing (or updating) your site: 
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it all together and test it. 

Check to make sure that you have all the content and links in the places 
that you want them and then test each Web page and the entire site. On 
your own machine, you can use a Web browser not just to see what your 
pages look like, but also to follow links from your site to other sites. Then 
you can use the Back button on your browser to return to your own site, 
on your own machine. (The only thing missing is that the people who 
eventually surf your site can't get to it until it's actually published on a 
Web server.) 

2. Put your content on a Web server. 

This is where it gets real. After you get your pages on the server, as 
described in Chapter 16, test them again. Especially, test all the links to 
make sure that they really go somewhere; remember nothing is more 
frustrating than clicking a broken link. 

3. Publicize your site. 

Get some users onto your site. Tell your friends, use Web resources, and, 
especially, get related Web sites to put in links to your site. Offer some 
kind of reward for feedback on your site — even if it's just taking that 
person's site off your "bad Web pages" list! (For more detail on this part of 
the process, see the section "Getting the Word Out" later in this chapter.) 

4. Bask in the glory of being a Web publisher. 

Having a Web site up and running is something to be proud of. Sit and 
enjoy it for awhile. 

After you get your site on the Web, you'll experience a brief moment of 
elation — and then one of concern — as you think of all the things you 
wanted to do with the site before you ran out of time. Then you'll click 
around your site and realize that something doesn't look quite as good as 
you wanted. You may compare your site with others and decide to add new 
features. Back to square one! 



Stumbling blacks an the Web 

For all its great characteristics, the Web has some problems that you're more 
likely to run into when you're creating a full Web site than when you're just 
publishing a single Web page. Among these issues: 

v 0 Differences in browsers: Different browsers, such as different versions 
of Internet Explorer or Netscape Navigator (and its descendants, such as 
Firefox), display the same HTML tags differently. And some browsers 
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support newer or nonstandard tags, so pages displayed in them look 



DropBoorC 

cone 



better — or at least different — than they look on other browsers, 
inconsistency can drive you to distraction. Use basic tools and 
your site simple until you learn your way around some of these 
concerns. 



V Faster and slower connections: Some users have fast network connec- 
tions to the Web, whereas many home users dawdle along at 56 Kbps — 
10 times slower than a typical corporate connection. So a graphics-rich 
page that comes up fast on one machine downloads very s-l-o-w-l-y on 
another. See Chapter 12 for information on how to keep your graphic file 
sizes small and Chapter 14 for information on how to keep your overall 
page size small. 

f* Those darn users: Users have different screen sizes, and they can recon- 
figure their browsers to use different fonts, different window sizes, and 
so on. So even users who connect to the Web through the same network 
and run the same browser can see the same Web page quite differently. 
Chapter 11 has details. 

V 0 Getting on a server: For your Web pages to show up on the Web, they 
have to be on a Web server. This means that you have to find either a 
volunteer or a vendor with a Web server and some hard disk space to 
spare. Luckily, space for a small Web site is usually either free or cheap 
(ahem, inexpensive), but finding the right server space and getting your 
files to the server can be a hassle. You can find out more in Chapter 16. 



Page description languages 



HTML is not a page description language — 
that is, a specification for exactly how your text 
and graphics should look when they're dis- 
played or printed. But Adobe Acrobat is a page 
description language, by far the most widely 
used on the Web. 

So if you want to put up a formatted page that 
keeps its look, feel, fonts, and more (regardless 
of the user's computer settings), use Acrobat. 
You can put the page up on the Web so that it 
looks exactly like a printed version. The prob- 
lem: Users must have a special viewer for your 
information. Acrobat Reader; most users are 
likely to have it, but a few may not. (Expect a few 



technical support calls from users who can't 
figure out what to do if they need to download 
Acrobat Reader.) Time magazine is among the 
big "names" who have adopted Acrobat, and 
many organizations use PDF files internally. 

To bypass this potential problem, Acrobat is 
now supported by a plug-in for Microsoft 
Internet Explorer and Netscape Navigator. 
Many computers ship with a version of Acrobat 
Reader already installed. For more information, 
see the following URL: 

www. adobe . com/products/acrobat/ 
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The first three problems are related to inconsistencies in the Web, and you 
may have run into them as a user looking at different Web pages. Now that 
beginning Web publisher, the answer to all these problems is the 
iep it simple! In this book, we use simple Web page layouts and stick 
almost completely to the basic HTML features available in all browsers to 
help you avoid these problems. 



The problem of getting your Web page on the server is a little different — the 
kind of hurdle that can stop neophytes cold, but one that experienced users 
clear with ease. In Part I of this book and in Chapter 16, we show you enough 
varied server solutions to meet any needs — and many of the solutions are 
even free! 



Creating Navigation 

Navigation is what helps users find their way around your Web site. If you 
have previously put up a single Web home page and are now expanding to 
a multipage site, creating navigation is a new challenge for you. But using 
navigation isn't. Every time you visit a major Web site, you encounter care- 
fully designed navigation. Luckily, for a small site, consistent navigation is 
easy to achieve. 



Arranging your pages 

Arranging your Web pages in your Web site is like creating a very small news- 
paper. You divide your Web pages up into a few sections, perhaps three to 
seven. Each section of your Web site is like a section of a newspaper, and 
should include one or several Web pages that fit within the theme of the 
section. 

The home page of your site is kind of like the front page of a newspaper, and 
somewhat like the table of contents in a magazine. The home page grabs 
people's attention with one or a few elements that are interesting in and of 
themselves; it also serves as a guide to what's inside the rest of the site. 

Take your Web pages — you may want to print them out for this exercise — 
and arrange them into sections. Be a little creative. If you have two pages in a 
section, you may want to combine them into a single page (to eliminate the 
need for navigation in that section), or rearrange them into three pages (to 
have more than one other page within the section to navigate to). 
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The Web site for Zanzara, a Web usability company, is a good example of 
simple, consistent navigation for a small site. Most of the sections have a 
ge. A few have a front page to the section that links to one or two 
pages that give further details. Figure 15-3 is a chart showing the 
original layout of the site. 



Figure 15-3: 

The original 
Zanzara site 
has a simple 
layout. 
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Getting the addresses right 

One major navigational element is easy to achieve: consistent Web addresses 
for your Web pages. For a small Web site, you want to have an understand- 
able URL for the site, a few major sections, and then one or a few Web pages 
within each section. 

Say your Web site is within the Yahoo! GeoCities site and is mainly focused on 
rotifers, small creatures made up of a few hundred cells. You've cleverly cre- 
ated the user ID rotifers in GeoCities, and the home page of your site is at 

www. geocities . com/ rotifers. 

Now you're going to create a multipage Web site. You decide to redo your 
home page to make it a site home page, and have four sections to your site: 

v 0 About Rotifers: Text pages 

Roti-Photos: Image pages 
i>* Web Resources: Text pages 
f* About Me: Text with an image 

With this arrangement, you can isolate the bulk of the photos, which tend to 
download slowly, onto pages where people should reasonably expect a slow 
download. Visitors to your site can get the basic information about rotifers 
and about you from the text-intensive pages, without a long wait, and they 
can visit the photo-intensive pages when they're ready to take their time. 
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Further, you decide that About Rotifers will be a single page of text, Roti- 
Photos will be several pages with one photo each, Web Resources will be a 
ge of Web links, and About Me will be two pages: a text-intensive 
a small photo of you, and a copy of your resume on its own page. 



Given these decisions, a list of possible choices for the Web addresses for 
your photos might be: 

www. geocities . com/rotifers/index. htm 

www. geocities . com/rotif ers/aboutrotif ers/ index. htm 

www. geocities . com/rotif ers /photos /index. htm 

www. geocities . com/rotif ers/photos/photol .htm 







www. geocities . com/rotifers/photos, 


'photo2 . htm 












www. geocities 


i . com/rotifers/photos, 


'photoS .htm 












www. geocities . com/rotifers/photos, 


'ph 


oto4 . htm 














www. geocities 


; . com/rotif ers/resources/index. htm 








www. geocities . c 


ora/ rotifers / aboutme / index . htm 














www. geocities . c 


om/ rot i f ers/ aboutme/ resume . htm 






To make these URLs work, you'll need to put the files in folders that match 
the hierarchy that you want to have, so you'll need a main folder enclosing all 
the other files and folders. Within the main folder (www. geocities . com/ 
rotif iers), you will have the index . htm file for the site's home page, 
plus any photos that will display on that Web page, plus folders for the 
other pages. The folders at that level will be aboutrotif ers, photos, 
resources, and aboutme. Each folder will then contain the index . htm 
file for that part of the site, plus any HTML files for additional pages in that 
section, and the photos needed for that section of your Web site. 

If you want to keep all your files in a single folder, just use filenames to achieve 
the same effect. For instance, call the HTML file that displays the first photo- 
graph photos-photol .htm, the second photograph photos-photo2 .htm, 
and so on. 

Having your site organized well, with understandable URLs, makes life easier 
for users. Many users look at URLs to see where they are in a site. And users 
frequently write down or e-mail URLs to bring a page to the attention of 
others. 
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Testing navigation 



"ways WreTultyTest the navigation on your site to the Web. It's very common for links to 

site. Test every link, on every page, at least stop working — to "break" — right after you 

twice: once after you create the site on your publish your site to the Web, so be ready to 

own computer, and again after you publish your quickly fix any problems. 




Many large Web sites have abandoned the convenience (for users) of having 
easy-to-understand URLs, in favor of the convenience (for them) of using a 
database to store all the content in the site. Each new Web page is displayed as 
a result of a database call, with the parameters for the database call placed in 
the URL. For instance, here's a (slightly disguised) URL from a search engine: 









http : / /dir . saltavista . com/search?] 


3g=dir&tp=Entert 


ainment/ 



Users would be happier with something like: 



http : / /dir . saltavista . com/ Entertainment /Music 



Some companies do cover up the database call with an understandable URL 
like the one immediately above, but most don't. If you provide a sensible set 
of URLs for your Web pages, you'll be ahead of most of the big fish. 



Creating a navigation bar 

Consistent navigation is key to a good-looking Web site. Follow these steps to 
create consistent navigation: 

1. Type in some text, or copy and paste it in. 

It's much easier to experiment with placing a graphic if you have some 
text in your document. 

2. Decide on the sections of your site. 

Decide on the major sections of your site. 

3. Create a set of navigation links. 

Navigation links consist of a set of words, linked to the major sections of 
your site, and usually separated by the horizontal bar character (I) on 
your keyboard. (You may not know about this character now, but you 
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will after you create your navigation links!) A typical set of navigation 
links looks something like this: 



About Rotifers | Roti-Photos | Web Resources 
About Me 





You can create a set of navigation links in SeaMonkey Communicator or 
other Web page creation tools by typing in text and then assigning a link to 
the name of each section. In HTML, use code something like the following: 

<A HREF=" index. htm" >Home</A> | 

<A HREF="aboutroti .htm">About Rotifers</A> | 
<A HREF= "photos .htm" >Roti-Photos</A> | 
<A HREF= " resources . htm" >Web Resources</A> | 
<A HREF="aboutme.htm">About Me</A> 

A nice trick for making your navigation bar more useful is to create a new 
version of it for each page, keeping all the text the same but removing the 
hypertext link for the current page. For instance, if the user is looking at 
the About Me page, the words About Me in the navigation bar shouldn't 
be hyperlinked. That way, users can always figure out where they are. 

4. Add the set of navigation links to the same spot — usually centered, at 
the top or bottom of the page — on each page in your Web site. 

If you want to have a graphical navigation bar, use a graphics program to 
create the image you want to use. Then use Composer or another Web 
page creation program to create the image map that goes with it. 
Alternatively, you can use a group of small graphics in a table. Use the 
navigation bar at the top of each page; keep the navigation links at the 
bottom, so users have a choice. 



Getting the Word Out 

Getting people to come to your site can be very easy, or very difficult. The 
main thing that makes it seem hard to get traffic is your own set of expecta- 
tions. If you expect huge numbers of visitors (a rarity, especially at first) or 
huge volumes of online sales (an even bigger rarity) without doing a lot of 
work, you're bound to be disappointed. But if you set your expectations at a 
reasonable level and use several different techniques to get people to come 
to your site, you're likely to meet your goals. 



Publicize your site 

After your site is up and tested, publicize it. The amount and type of publicity 
you need depends upon your goals for the site. If you are trying to impress 



Part IV: Polishing (and Publishing) Your Site 



site, you r 
to sell on 



the press and analysts, issue a press release. If you are publicizing a personal 
site, you may find that telling friends and family about it is sufficient. If you 

to give customers another avenue for communicating with you, put 
on stationery, business cards, and advertisements. If you are trying 
the Web, put ads on other Web sites that attract your prospective 
customers. Tailor your publicity strategy to your goals. 



ejtiNG/ There's an old saying that "you have to spend money to make money." 

Contrary to popular belief, this saying is just as true on the Web as it is any- 
where else. You can do a tremendous amount with a personal, hobby, or 
group Web site while spending little or no money and only a moderate 
amount of time. But don't expect to make money from your Web site unless 
you're willing to spend money — or enormous amounts of time, remembering 
that "time is money" — creating, marketing, and updating it. 



Playing the name game 



One of the best ways to get people to remember 
your site is to get your own domain name. A 
domain name is the first part of a Web address, 
usually not including the www . at the start. For 
example, yahoo.com and whitehouse. 
gov are domain names. What people use to 
reach you is the Web address or URL (Uniform 
Resource Locator), which is just a standardized, 
or uniform, way of finding resources such as 
Web servers and files on the Internet. 

www. smithtires . com is much easier to 
remember — and much more impressive — 
than www . geocities . com/ smithtires. 
In the first case, the domain name is 
smithtires . com; in the second case, it's 
geocities . com. Clearly, an individual may 
plausibly own the first domain name; the 
second is owned by Yahoo!, one of the busiest 
sites on the Web. 

You can get a domain name in one of sev- 
eral ways, but the most popular way is to 
go to the Network Solutions Web site at 
www . networksolutions . com. Network 
Solutions charges less than $40 a year for a 
license for a name. The Network Solutions Web 



site makes it easy to try different domain names 
to see what's available. (It also gives you the 
ability to build a Web site hosted by Network 
Solutions for a reasonable, but not insignificant, 
fee.) You can also purchase your domain name, 
often for a higher fee, through a Web hosting 
company, or a site such as GeoCities or AOL. 

We recommend that you follow a little bit of a 
process for deciding on your domain name. 
Come up with a list of desired domain names. 
Then check on the Network Solutions Web site 
to see which ones are available. When a 
domain name is not available, the Network 
Solutions Web site suggests similar names that 
are available — and, the whole process may 
give you new ideas. Write down the best of 
those as well. Then check your top three to five 
names with afewfriends or colleaguesfortheir 
reactions and ideas. 

Go through this process a couple of times, and 
give yourself a day or so to think aboutyourfinal 
candidate before finally purchasing a domain 
name. Getting a name is so easy that it's all too 
easy to end up buying several names before you 
finally end up with the one you really want. 
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The first and most important place to publicize your site is on the Web itself. 
Your basic goal is to get as many links as possible to your site from What's 
What's Cool lists, and especially directories or pages that are spe- 
e interests your site addresses. Find pages with a similar purpose 
and trade pointers from their site to yours and from your site to theirs. 



The Web publicity picture changes all the time, so the best place to go for 
information is any of several Web sites with publicity info and pointers: 



www. cyberwave . com/ppoint2 .html 
www . samizdat . com/public . html 
www . bcentral . com 



These sites give you information on how to get your pages publicized on popu- 
lar sites such as the Yahoo! What's New page. (See Figure 15-4 for an example.) 
You can find this page at dir . yahoo . com/new. 

You should also use non-Web means of publicizing your site. Put out a press 
release — but be sure to wait until your site's really ready, not full of Under 
Construction signs. Many companies proudly include their Web site URLs on 
business cards, stationery, print ads, and even television ads. You've invested 
a lot in your Web site — now's the time to benefit from your efforts. 
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t about hiring out your Web work? 

mg your Web site is often a 



good idea. Use this bookto learn enough about 
Web publishing so you can communicate effec- 
tively with a consultant, and so you can do some 
of the work yourself. Then find someone to help. 
Bigstep, at www . bigstep . com, is a service 
that helps individuals achieve their Web site 
goals — inexpensively. For a more customized 
approach, hire your own consultant. eLance, at 
www. elance . com, is a good place to start 
looking. 

If you work in a large organization, you or your 
boss may consider hiring out all the Web work 



for your company. This is a bad idea. Although 
using consultants to help introduce and use 
new technology is a good idea, developing a 
reasonable amount of expertise in-house is an 
even better idea. So don't hire out the entire 
process; have a mix of employees and contrac- 
tors working on your company's Web site. A 
good way for you to get the necessary experi- 
ence to be a useful memberof such ateam isto 
create one or two small Web sites yourself, as 
described in this book 



Count your blessings — and your users 

For Web pages in general, and for business Web pages in particular, knowing 
how many users visit your site is important. If you are creating a business site, 
you need to establish goals for the number of users who visit your site and for 
the number who take specified actions, such as downloading software, visiting 
various parts of the site, or buying products. Set goals and then measure 
against them. Microsoft's Bcentral site at www.bcentral . com includes many 
useful tools for Web traffic measurement, as does www . statscounter . com. 

Among the things you can track are the number of e-mails you receive from 
users and the number of people who register on your site (if you support that 
option). But the most widely accepted measurement of success is page views, 
or the number of pages that users have visited on your site. Obtain the 
server log for your site from your Internet service provider and pore over it, 
or obtain any reports that are available. Many Web hosting providers give 
you a monthly report, or at least let you access the log files from your site for 
your own review and analysis. 



Keep people cominq to your site 

The missing link for many Web sites is return visitors — people who have vis- 
ited your Web site before, and then come back again and again. Given how 
busy people are, it's hard to get them to build visits to your site into their 
daily routines. 
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One of the best ways to get people to come back to your Web site is through 
e-mail. For a personal site, send your friends and family e-mail when you put 
g new on the site. For a business site, plan on adding something new 
nee a month. Then tell people about it by using your customer and 
partner e-mail list — a list that, as a businessperson, you'll put time and 
money into expanding and maintaining. (And a list that you'll use wisely by 
asking permission before sending mass e-mails to people.) 




Be sure to give users a place to see the progress of your Web site and find out 
about your plans for it. Some sites have a "What's New" page to describe 
recent additions; such a page is also a good place to describe your plans for 
the site's expansion. Avoid giving specific dates unless you're very sure of 
them. Be sure to convey excitement about what you already have up and 
what you're planning to add, not embarrassment about what's missing. 
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ublishing Your Web Pages 



In This Chapter 

Getting Web server space 
Finding help for Web publishing 
Transferring your files to the Web server 
Putting your site to work 



JL/ublishing is the most exciting stage of creating your Web page or Web 
V site. After all the fooling around with tools, HTML, and all your images - 
and after figuring out what you want to say and how you want to say it, you 
can finally "go live," as they say in the business, and let the world see your 
creation. 



Publishing on the Web can be straightforward if you're putting up a personal 
or topical home page that a few friends and/or coworkers see. But if you're 
creating a site for a business, or just creating a site that needs room to grow, 
publishing involves several steps. 

The first step in publishing your Web page is to get Web server space. You 
have a lot of options here. Can you get free space or must you pay for it? Do 
you want your own domain name, so that your site has a simple URL (such as 
www . budsmi th . net), or are you willing to let your site be a subdirectory in 
someone else's domain (such as www. geocities . com/budsmith)? You 
need to choose a server space provider that gives you reasonable pricing and 
support now plus room to grow later. Then you need to transfer your files to 
the site and check to see that your page really is online. 

But you're not done yet. The whole purpose of getting your Web site online is 
for people to see it. With all the sites out there, you have to cut through the 
noise and get people to visit your site. After people see your site, you will 
want to know that they were there, so you need some kind of site statistics 
reporting. You also need to be able to receive and respond to feedback. 
Having all these things to think about reminds us of those U.S. Army ads — 
"It's not just a job, it's an adventure." 
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Packaged publishing 



Tandle publishing your Web 
pages is to not handle it at all and to have it 
done for you. Easy-to-use Web page services 
such as GeoCities and AOL Hometown, 
described in Chapter 2 and Chapter 4, respec- 
tively, handle the publishing step for you — at 
least in the early stages. But as you build up 
your Web page, or create a multipage Web site, 
you need to start worrying about things like 



transferring files via FTP and so on. And you 
may want your own domain name or other 
advanced features that require you to find a 
new hostforyourWeb pages. If publishingyour 
Web site seems like a hassle, get started with 
an easy to use Web page service, and then 
come back to this chapter when you need to 
take your site to the next level. 




In this chapter, we cover the basic publishing steps — getting server space, 
transferring your files, and so on. These are the core steps that you need for 
either a single Web page or a multipage Web site. In Chapter 15, we cover 
more advanced steps related to publishing, such as getting your own domain 
name and letting people know about your site. 

After your site is up and publicized, you may expect to get a chance to relax. 
But then, while you cruise the Web, you may see something neat that you 
want to put into your own site. Or looking back at your own pages, you may 
suddenly discover a problem in the way you describe yourself, your com- 
pany, or your interests. Or maybe you get a blizzard of e-mails asking a ques- 
tion that you thought you already answered on the site — or, worse, you get 
no feedback at all. Maybe it's time to fire up that HTML editor again. 

Sorry to plug a book cowritten by one of the authors, but if you're in a hurry 
to create a Web site for a business, you may want to consult Internet Marketing 
For Dummies, by Frank Catalano and Bud E. Smith (Wiley). Internet Marketing 
For Dummies goes into more depth about business-related issues, such as how 
to register the right domain name, how to present your business online, and 
how to use other Internet services besides the Web as part of your marketing 
effort. 



Getting Web Server Space 

A Web server is a computer that's connected to the World Wide Web and runs 
special software that enables it to provide information to Web users. Hundreds 
of thousands of such servers are connected to the Web. You can have a lot of 
fun fooling around with a Web page that you create and store on your own 
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computer. But only by placing your Web site's files on someone else's server — 
or by creating your own Web server with your site's files on it — can your site 
part of the World Wide Web. 



You can easily get space on a Web server. For example, the free Web-based 
publishing services we describe in Chapters 2 and 3 all include free Web 
server space. Or, you may have a friend or an affiliation with an organization 
that can lend you Web server space. These are all good options for a single 
Web home page or a small site. 



If these options aren't available to you, though, or if real money is involved, 
things get tricky. When you create a site for a business or another kind of 
organization, most of the services we mention in the preceding paragraph 
don't give you free space. So if you're going to start paying for server space, 
you want to do some comparison shopping. And to do comparison shopping, 
you have to know what to compare. 




America Online is the one major service that continues to allow free Web 
server space for businesses as well as individuals. See Chapter 4 for details. 



Web hosting seri/ice features 

A number of businesses and organizations offer Web hosting service — that 
is, space on their Web server for your Web site. Most of these organizations 
charge for this service, and fees vary. You should look at a number of con- 
cerns when choosing a Web hosting provider for your Web pages. 

Focusing only on price when you compare Web hosting service providers is 
understandable. But you should look at many other factors that may actually 
be more important than the immediate cost: 

Pricing structure: Instead of focusing only on the charges for your initial, 
bare-bones site, consider also what providers charge you when your site 
grows larger and attracts a moderate number of visitors — say a few hun- 
dred or a few thousand a month. Some hosting providers charge a very 
low rate for your initial site but sock it to you when your needs grow. 

Support: We all need support of one kind or another, but excellent tech- 
nical support for your Web publishing effort is one of the hardest — and 
most important — kinds of support to get. You need support for putting 
your pages onto the server, for answering questions about your site, and 
for solving problems about speedy access, uptime (how long the service 
is on the air trouble-free), and so on. Find out about the support providers 
offer for each type of Web hosting option that interests you. Ask other 
users of each service if they're able to get support fast when a problem 
comes up. 
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Web-related consulting services: Some Web hosting providers, even 
those that offer some services for free, also offer other Web-related ser- 
s that they charge for, such as hosting business sites or managing 
site for you. What do the providers charge for these services? 
How well do they work? Most Web-related services are billed by the 
hour, but some service providers get things done better and faster than 
others, so a less expensive hourly rate may not mean a lower total bill 
at the end. 

i>* Site services: Some Web hosting providers offer helpful services, such 
as counting the number of users who visit your site. Other providers 
allow you to create and run Common Gateway Interface (CGI) scripts 
that perform sophisticated functions, such as processing the data from 
an online form. Other Web hosting providers neither provide site ser- 
vices nor allow you to run CGIs. Look for a provider that does the simple 
stuff for you and supports you in doing the more complex functions 
yourself. 

v* Domain name: The domain name is the name of the server where your 
site resides, but clever providers can put multiple domain names on a 
single computer. This means that you can have your own domain name, 
even if you have a small site, as long as your Web hosting provider regis- 
ters the name. Registering a domain name costs service providers any- 
where from about $10 to about $30 per year. Expect your provider to pass 
this charge on to you, but don't let the provider charge you a great deal 
more. For more about having your own domain name, see Chapter 15. 
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Some Web hosting providers offer to register a domain name for you, but 
then they retain ownership of the domain name themselves. This situation 
reminds us of those Peanuts cartoons in which Lucy sets up the football 
and then pulls it away when Charlie Brown runs up to kick it. Not owning 
your domain name free and clear can severely hamper your ability to move 
your site later. 



Find out whether the Web hosting provider allows you to get your own 
domain name, either immediately or later. And if the provider does, ask for a 
clear, written statement that you own the domain name and can take your 
Web site to another host if you want to. 

When you consider a Web hosting provider, consider in your evaluation the 
following factors: 

f Speed: How fast can users access your Web site? How fast can users 
download files hosted on the site? You can ask, but you should also test. 
Try accessing some Web sites hosted by any service that you're consid- 
ering and see how fast they are, especially at busy times of the day. 
Compare what you find to other Web sites. 
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i>* Downtime: Is the Web hosting service that you're considering ever "off 
the air"? You may think that downtime is rare, but even entire online ser- 
s such as America Online have downtimes. Find out the track record 
iowntime of the Web hosting service that you're considering and 
compare that service's record with competitors. 





**" Switchability: Having the ability to switch Web hosting providers is cru- 
cial. With the right to switch, you can resolve any other problems. 
Without the right to switch, you may be unhappy with some key ele- 
ments of your Web site for a long time. Two things can keep you locked 
into an arrangement with a provider: contractual provisions and control 
of your domain name. Don't sign a contract that locks you in for more 
than a year, and don't let the Web hosting provider register your domain 
name for you unless the provider states, in writing, that you control 
your domain name and can take it elsewhere. 

\>* Viability: Many Internet-related businesses have gone out of business. 
(Even giant firms collapse sometimes, like the energy giant Enron, but it 
seems that the Internet has had more than its share.) Make sure that 
your chosen provider has a track record and is of sufficient size to offer 
some assurance that it will be around for the long haul. 

V Reporting: You really, really want your provider to offer basic reporting 
features, such as the number of visitors your site has each day, for free. 
This may be the critical factor in choosing between one provider and 
another. 

V Data transfer fees: Another potential gotcha involves data transfer fees. 
When users look at a page on your site, all the data on that page is trans- 
ferred to their machines. If users download files, more data is transferred. 
Many Web hosting services offer some free data transfer, but your costs 
can rise sharply if traffic at your site increases and data transfer rises 
above a minimal amount. Compare data-transfer pricing carefully. 

*>* Price: If all other things are equal, price is the determining factor. But all 
other things are rarely equal. Consider other factors first, but don't let 
yourself get ripped off on the price you pay. 



The key factors in choosing a Web hosting provider are the freedom to switch 
when you need to, having control of your domain name and price. 



Options for Web server space 

Now that you know what to look for in a host server, where can you find Web 
server space? Finding the right place for your Web site to be hosted is not 
an easy task. Major Web hosting options include sites that offer free server 
space, online service Web hosting options, Web hosting services, and a Web 
server of your own creation. 
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hat makes a Web server fast? 



A Web server is usually rated by the number of 
connections — brief communication sessions 
between two machines — that it can handle in 
a given period of time. The number of connec- 
tions that the server handles depends on how 
quickly the server establishes a connection, 
deciphers the request, sendsthe requested file, 
and terminates the connection. Most people 
assume that the most time-consuming step in 
this process is the speed with which files are 
transmitted. Surprise! When small files are 
transmitted, the bottleneck is usually not how 
fast the files are transmitted, but how quickly 
the server's hardware and software establish 
connections for each of the file transfers, and 
how fast the connections are terminated after 
the transfer is finished. 

Engineers and various hangers-on, such as 
people who write computer-related books, like to 
call the cause of a bottleneck a gating factor. For 
example, the gating factor for completing this 



book on schedule is the speed at which the 
authors write. The gating factor in serving simple 
Web pages is often the speed with which the 
server can connect and disconnect, not the 
speed with which data can be sent over the wire. 

In addition to the speed of connecting and dis- 
connecting to other machines, the speed of the 
server's connection to the Internet makes a big 
difference, especially for larger files such as 
big graphic images. If you have a direct con- 
nection to the Internet (as you find at most large 
companies and most universities), your client- 
side connection may be even faster than the 
server's connection: Lots of personal and small 
business home pages are sitting on Web 
servers with nothing but a 56 Kbps modem con- 
necting them to the Internet. So don't start 
cussing atyourown modem when that full-color 
JPEG photograph of the winning Weimaraner 
takes forever to download; the problem may be 
at the other end. 



No matter what choice you make initially, be sure to keep your options open 
because your needs may change rapidly as new Web hosting providers arise, 
your own knowledge grows, and the Web's role in business and in daily life 
increases. 

Using free seri/er space 

You can get free server space for relatively small Web sites from several 
places. (See Chapters 2 and 3 for details.) These sites are great places to 
create small initial Web sites that help you learn about Web page design and 
construction. However, businesses generally can't use free server space for 
straightforward business promotion. (But you do see lots of not-so-straight- 
forward promotions there!) Also, to get your own domain name, you either 
have to move to paid server space or create your own Web server. 
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If you have access to free server space through a friend, through school or 
work, that's also a good place to get started. Be careful, though, that you 
late any expectations that the people providing the space to you 
ut the content of your Web site. 




As we mentioned in Chapter 14, Bigstep, a Web business, will help you 
create a starter business Web site for a moderate cost. Visit them at www. 
bigstep . com. 

Using Internet service providers 

Internet service providers (ISPs) may be best known for offering Web access, 
but many of them also offer a wide range of Web services, from consulting to 
hosting to programming and more. In fact, as larger players, such as AT&T 
and Earthlink, continue to establish their Web access business, the smaller 
ISPs that prosper will be those that move "upstream" into consulting and 
specialized hosting services. ISPs that are also traditional online services, 
like AOL and CompuServe, sometimes change their higher-level offerings as 
partnership opportunities change. 



Some ISPs offer free Web page publishing services or free server space to 
customers, just like the major online services. They also offer varying levels 
of paid-for service. Compare major ISPs to see what they offer. If you already 
have Web access, don't stop checking. Many ISPs offer their extra-cost add- 
on services even to those who get their access elsewhere, and some ISPs may 
offer attractive bundles for access plus other services. You still have to be a 
customer to get that free server space deal, though. 



Using paid-for server space 

You can find thousands of Web hosting services out there. The providers vary 
tremendously in service, price, and competency. Some offer hosting only and 
charge you per stored or transferred megabyte. Others offer additional ser- 
vices, which may be billed separately or bundled with the "pure" hosting ser- 
vices in an overall fee. This business is changing and growing so rapidly that 
you need to exercise great care in the selection process to protect yourself. 
The largest service, Verio, which acquired the former leader Best Internet, is 
also considered among the best (no pun intended); you may want to start 
your search by checking on them at www . verio . com. Other services we've 
had good luck with are www. f atcow. com and www. landl . com. 




As the Romans figured out, just a few years before the Internet caught on, 
caveat emptor — let the buyer beware! Do your research! Check out "Web 
hosting service features," earlier in this chapter. 
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Creating your ou/n Web sert/er 

Deciding whether to create your own Web server depends, as do many other 
fc^^ibout the Web, on what you want to accomplish and how much expe- 
!>u have. If you've set up a Web server before or have a lot of com- 
puter and communications experience, setting up your own Web server may 
work out very well for you. If not, setting up a Web server may turn out to be 
an expensive nightmare — and slow to boot! (That's "slow as well," not slow 
to start up when you hit the On switch!) 




Many proponents of doing business on the Web are quick to suggest that you 
set up your own Web server, but we don't share that view. Unless you're an 
expert, we recommend that you start with a Web hosting provider of some 
kind. Then consider setting up your own server after you gain some experi- 
ence and get to know some people who can help if problems arise. 




Two things to remember: If you set up your own Web server, use a dedicated 
machine that isn't doing any other work. (If you follow this very good advice, 
you'll spend up to $1,000 or so before you store or serve a megabyte!) And be 
ready to devote time and energy to find out about the computer you're using, 
its Internet connection, and associated Web technologies so that you can set 
up your own server to meet your needs as effectively as a Web hosting service 
would. 



Hiring, help 

The dot-bomb phenomenon — the sudden crash of so many Internet busi- 
nesses in 1999 through 2001 — made a lot of talented Web pros available. In 
addition, 15 years after the Web itself was invented, some of the amateurs are 
pretty good at what they do. So the odds of finding a good person to help 
you, either on a paid basis or just because he is a friend, is growing. 

To find a good Web hosting provider — someone who can provide the Web 
hosting services we describe in the previous section — or get other help 
relating to getting your Web site up, we recommend the following steps: 

i>* Start small. Asking the right questions to help you find a Web hosting 
provider or consultant is difficult if you have no Web publishing experi- 
ence of your own. Start by creating a home page and then a small, special- 
purpose site of some kind before doing anything more robust. The 
experience will be valuable in finding a good hosting provider. 

W Figure out what services you need. Are you going to create a simple 
site or a complex one? Do you want to create the site yourself and buy 
hosting services only, or do you want to contract out most of the work? 
List your needs, and then find someone who's well suited to fill them. 
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f Investigate sites like your own. Find Web sites that look like the kind 
you want to create. Ask the Webmasters how they got their sites up and 
ing and what Web hosting providers they use. Ask others in your 
about their Web sites and whether they're happy with the services 
they receive. When you consider a specific provider, check into a few of 
the sites that the provider hosts and ask customers whether they're 
happy Talk to a couple of satisfied customers of consultants you're 
researching. 

i>* Go local. One perk of hiring a local consultant is that you can meet with 
the consultant occasionally in person. (Even with all our technological 
aids, looking someone in the eye can contribute to better and deeper 
understanding. And sometimes a face-to-face meeting can lead you to 
find that you really dislike a person!) Although going local greatly 
restricts your choices, especially if you don't live in a big city, it may 
significantly improve your working relationship. 

Be involved. No consultant or service provider can do everything. 
You need to be very much involved in every step of the process, so 
plan to devote many hours to working with your consultant or service 
provider. 



Get it all in a cyberstore 



An online store is a special kind of Web site that 
enables you to sell products online without any 
hassle. An online store operator may provide 
any or all of the following: 

Initial goal-setting for your Web site 

Creation of the Web page itself (expect to 
provide raw materials such as product or 
service descriptions, photographs, and 
price lists) 

Advertising and publicity 

Supportfor online sales 

Yahoo!, eBay, and Amazon.com have cyber- 
store-type arrangements thatyou can use to get 
publicity for your online selling. Using the right 
cyberstore host can be a good way to get 
started on the Web, especially if you wantto go 



from zero (no Web presence or expertise) to 60 
(a robust Web presence with online transaction 
capabilities) in a few months. Expect to pay 
fixed monthly fees that amount to several hun- 
dred dollars a year. Cyberstores also collect a 
small share of transactions. Using a cyberstore 
gives you a chance to develop Web expertise 
so that you can eventually do more of the work 
yourself. (Make sure that your contract allows 
you to leave the cybermall quickly if you wantto 
take over the whole job on your own.) For pop- 
ular online store providers, see the following 
sites: 

www.amazon.com 
www . ebay . com 
V* www . yahoo . com 
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Is your site too cool? 



"hanf your sitfrffroo successful? Believe it or 
not, the success of your site can be a problem. 
Many sites become overloaded when they catch 
on, rise high in the search rankings, are linked 
with a suddenly popular subject, are mentioned 
in the press, or receive other similar recognition. 
Be ready to upgrade your Web hosting provisions 
if your site suddenly gets popular. In particular, if 



you pay extra for transferred megabytes, make 
sure that you have a capon how much you must 
pay if usage suddenly shoots up. If you don't have 
a cap, set up some method to track usage fre- 
quently or to receive an alert if usage shoots up. 
That way, you avoid a potentially nasty surprise 
on your bill. 



Transferring \lour Files 

One of the really cool things about Web publishing is that you can set up, 
test, and modify a version of your Web site on your own machine. The prob- 
lem is that, at some point, you have to transfer your files to the Web server. 
Until you become proficient at transferring files, you may have some anxious 
file-transferring moments. In this section, we try to eliminate some of the 
worry in getting your site online. 

Arranging qow files before transfer 

Some of the most difficult things about creating, testing, and transferring 
your Web pages relate to directory structures. The problem is that a link 
from, say, your HTML-tagged text to a graphic has to specify what subfolder 
the graphics file is in. When you transfer your files to a different machine, the 
subfolders are likely to change, which breaks the link from your Web page to 
the graphics file. You can take steps, however, to keep your links from break- 
ing when you transfer your Web files from your development machine to the 
Web server. 

If your site has 20 files or fewer, here's a simple solution: Just put all your files 
in the same subfolder. That way, you only need to specify the filename, not 
the folder name — your links are that much simpler to access and maintain. 
And when you transfer files, you don't need to match up subfolder structures 
between machines. See Chapters 8 and 13 for details. 
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For sites with more than 20 or so files, use the simplest folder structure you 
can — only one level deep, if possible. (You don't need a separate subfolder 
of your 50 files, do you?) Also, create your links by using relative 
Relative addressing, described in Chapter 13, doesn't specify the 
entire pathname from the root folder downward, just the relative path from 
the file with the link embedded in it to the file with the link target. Relative 
addressing enables you to move folders and subfolders from one machine to 
another without having to change all the links between files. 

Some people prefer to zip their files (otherwise known as using a compres- 
sion program, such as PKZIP) to keep file size small when transferring them 
online. Before you compress files, make sure that the recipient wants zipped 
files and that she can decompress (unzip) them. Also realize that the largest 
files in a Web site are usually GIF or JPEG graphics files. Because these files 
are compressed already, compression programs can't compact them much 
further. But a compression program can help you get all the files into a single 
package, with relative folder locations preserved. 

As you can see, the underlying theme for anyone starting out is to keep it 
simple. After you have some initial successes under your belt, you can begin 
taking steps to organize your site better and to make it more convenient to 
manage and update. 



Transferring your files With FTP 

File Transfer Protocol (FTP) is an Internet service for transferring files 
between different machines. FTP helped make the Internet popular even 
before the World Wide Web caught on. FTP offers a relatively easy way to 
move files from one machine to another. Most Internet users rely on FTP to 
download files from an FTP host to the users' own machine; however, the 
user often starts the file transfer from a Web page, bypassing the details of 
FTP. When you publish your Web pages, your service provider may ask you 
to send files from your own machine to the host by using FTP. (You will prob- 
ably be asked to "FTP the files to us.") If using FTP is a new operation for you, 
don't worry, it's not all that complex. 

Dozens of FTP programs are available for Macintosh, Windows, and UNIX 
machines, and each program has its pluses and minuses. (The major online 
services also have facilities for uploading files, which we describe in the 
"Connecting to an FTP site" section that follows.) The most popular program 
we know of is WS_FTP Pro for Windows; Fetch is big on the Macintosh. You 
can find many free FTP clients on the Web. The steps we provide work with 
most popular FTP programs. 
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Many programs with FTP capability can download files from FTP sites but 
don't upload files to an FTP site. Make sure that your FTP program can put 
i well as get (read) files. For a useful program, search for FTP on 
^download site at www . download . com. Microsoft Internet Explorer 
can do the job as well; begin by pointing your Web browser to the FTP site. 
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Connecting to an FTP site 

The following steps specifically work with Fetch, the most popular Macintosh 
FTP program, shown in Figure 16-1. (Notice the little dog, probably a Scottie, 
running to fetch the file!) But the same steps generally apply to other FTP 
programs as well. 



Figure 16-1: 

A fetching 
Mac FTP 
client. 
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Use these steps to transfer files to a Web site: 

1. Connect to the Internet. 

2. Start your FTP program. 

3. Enter the host name. 




For a Web site, the FTP host name is often the same as the host name 
in the Web site's URL but with ftp in place of www; for example, if the 
Web site's URL is www.mysite . com, the host name is likely to be 

ftp .mysite . com. 



4. Enter the username. 

Many sites allow you to enter anonymous as the username, so you avoid 
having to enter a specific username. (This capability is called, unsurpris- 
ingly, anonymous FTP?) Other sites give you a username and password to 
use when uploading your Web files. 

5. Enter the password. 

If you entered anonymous as the username, enter nothing or your e-mail 
address as your password, as requested. 
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6. Enter the directory that you want to put files in (that is, to write to). 

You can also go to the correct directory after you connect, but the 

ess is more convenient and less error-prone if you enter the correct 
ctory first. As in previous chapters, we recommend that, for a simple 
site, you put all the HTML files and graphics in a single folder to simplify 
linking. 

7. Click OK to connect to the FTP site. 



If you've done everything right and the site is up, your connection 
begins. Refer to Figure 16-1 for the dialog box that appears after you con- 
nect if using the Fetch FTP program. 



Uploading your fife (s) and disconnecting 

Getting connected is half the battle, although we must admit that this 
process is hardly a fight. Writing your files is usually pretty easy. Here are the 
steps you must follow to complete the FTP process: 



1. Click the appropriate option for the file(s) that you want to write: 
Automatic, Text, or Binary. 

For HTML files, use Text. For graphics and multimedia files, use Binary. 
For a combination of both types, either upload the types one at a time 
with the proper designation, or upload them together and choose 
Automatic; the server tries to figure out which is which. 

Until you have experience with a specific server, transfer files one at a 
time and specify the correct file type before each transfer. 

2. Click Put to write your file. 

This option may be named "Send," "Upload," or something similar on 
other clients; to initiate the process, you may have to select the option 
from a menu rather than click a button. 

3. In the dialog box that appears, click the name of the file that you want 
to write and then click OK. 

The file transfers. Repeat Steps 1 through 3 for each additional file that 
you need to transfer. 

4. When the transfer is complete, choose Quit (or Exit) from the File menu. 



Usinq an online service file transfer 

In Chapter 3, we describe how to use the Web publishing programs on the 
major online services to create and publish a home page. However, the online 
services' Web facilities are flexible. You can create HTML-tagged text and 
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graphics files with any tools and then upload the files to a server. The online 
service file transfer tools resemble FTP. Figure 16-2 shows the America Online 
fer program. Other file transfer programs are similar. 



Figure 16-2: 
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Putting \lour Site to Work 

After you get your site up on the Web, you're probably too happy and 
relieved to worry about the site for awhile. But going live isn't an ending; it's 
really just the beginning of a whole new process. The following sections 
describe some initial steps to make your newly published site really stand 
out and accomplish your goals. 



Testing your site 

As soon as you get your site up, log on to it as a Web user. See if the site 
works. Test all links to make sure that they go where they should. Make sure 
that you can easily move between pages. Try accessing your site from a com- 
puter with a slow modem connection to see how usable the site is at slower 
speeds. Also try using your site in both the Netscape and Internet Explorer 
browsers. You can also test it in America Online's built-in browser, if you have 
access to AOL. 

Also note how you would react if you were a new user. What does the site look 
like it's for? Does the site meet this expectation? Do you experience any diffi- 
culties or confusion in using it? This open-minded approach to your own site 
can help you quickly fix subtle problems that otherwise are hard to identify. 
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Testing your site can be a bit frustrating because you may find all sorts of 
things to fix, but if you follow through, you end up with a much better site. 

; to take notes on your reactions from the moment you first log on to 
I until the end of your visit — remembering first impressions later is 

difficult 




Use your browser's Print capability to print out all the pages in your Web site, 
and then put your notes right on the printout. Get feedback from anyone else 
who will take the time to look at your site. A printout enables you to easily 
keep track of your ideas as you go along and to make the right changes the 
first time. 



Getting feedback on your site 

Ask for feedback! You can put the request for feedback right in your Web site. 
You can also ask friends and colleagues to try the site and give you their 
honest opinions. Ask them some leading questions, such as "What do you 
think the site is for? How does it compare to other sites you've seen? What's 
the one thing you'd change about the site if you could?" 
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The 5 th Wave By Rich Tennant 
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"Evidently Vie died o£ natural causes iollovuncj 
a marathon session animating everything on 
his personal Web si-be. And no, Korganstem - 
•the irony isn't lost on me.* 
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In this part . . . 

\M our users will enjoy seeing your Web pages, but 

they'll enjoy doing something with them even more. 
Use easily available online and offline tools to add anima- 
tion, multimedia, and interactivity to your Web page. 
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In This Chapter 

Using multimedia in your Web pages 
Adding animated GIFs to your pages 
Adding video to your pages 
Adding QuickTime and MP3 files 



I\ nimation is a lot of fun — and it works well on the Web today because 
V \ animation technology is so readily available to beginning Web page 
creators. Simple animations, called animated GIFs, are easy to find, and you 
can put them on your Web site for free. If you're not interested in using some- 
one else's creations on your Web page, it's not that much harder to create 
your own. 

But there's more than just animation. You can incorporate audio, video, and 
other multimedia technology into your Web page design. This chapter intro- 
duces you to your multimedia options and gives you a heads-up on some of 
the technological and legal pitfalls you face as you utilize these incredible 
innovations. 

Getting your page right by using the basic Web ingredients of text and graph- 
ics is a real challenge but a lot of fun. Get the Web publishing basics down 
before you push forward into the realm of multimedia. You can run into some 
problems when using multimedia, as described in the next section, but if 
you're adventurous, you can use the information that follows to add exciting 
multimedia flavorings to your Web pages. 



Understanding Multimedia Pitfalls 

Multimedia is something of a many-headed beast. Audio works fairly well on 
the Web today. Animated GIFs are readily available and easy to incorporate in 
your Web page, as are audio files. The MP3 standard has revolutionized the 
availability and usability of music on the Web. (Unfortunately, however, MP3 
has also caused the greatest challenge to copyright laws in years.) And full- 
motion video is yet another kettle of fish. 



and Multimedia 
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How TV beats PC 



\s air eiTOrramTnWt transmission system, TV 
beats the PC hands down. The "user experience" 
of watching Why Animals Attack: Scary Police 
Videosfar surpasses — from a technical point of 
view, anyway — the best of Web multimedia. 

Why? Just do the math. A typical text-only Web 
page takes about 2K (kilobytes, or thousands of 
bytes) of storage space. Say you're willing to 
make the user wait one second to see a page. 
So the minimum bandwidth needed for effec- 
tively transmitting text Web pages through the 
Internet — from the server, across the Internet 
backbone, and all the way down to your PC — 
is 2KB in a second, which is 16 Kbps (kilobits per 
second; 8 bits are in a byte). A 56K modem is 
about three times faster than this, so you're in 
good shape for text-only Web pages. 

Now add graphics. Major Web sites try to keep 
their total "page weight" under 50KB for fast 
viewing. 50KB (kilobytes) equals 400Kb (kilobits). 
So to experience good response times for typi- 
cal Web pages, you need a 400Kb connection — 
about as fast as a DSL connection or a well-man- 
aged corporate network. So you're pushing the 
limits of the technology available to a typical user 
if you wantto see today's typical Web pages at a 
reasonable speed. 

Now look at multimedia. A typical TV displays 30 
frames per second at roughly 560-x-420-pixel 
resolution, or over 200,000 pixels. That's 6MB 
(megabytes), or — at 8 bits in a byte — 48 
megabits, per second, more than 100 times the 



speed of a DSL connection. (Remember, 8 bits 
in a byte.) And that's just the picture — no 
sound! Not even a cable modem, on a good day 
and with none of your neighbors on with you to 
share the cable line to your home, can hope to 
deliver this. Neither can most corporate net- 
works; the Internet backbone would get over- 
crowded very quickly with TV transmission 
added in. Displaying multimedia as good as an 
uncompressed TV broadcast is really beyond 
the capability of the worldwide Internet or of the 
connections to your home. 

To work around these problems, all sorts of 
tricks are needed. Compression makes sound 
files — and video clips using very small image 
sizes — ready for Internet downloading and 
use. Streaming technology, running on a server, 
can dole out multimedia packets — again, for a 
small image — at a rate that the user's system 
can handle. And creative people work hard 
behind the scenes to try to extract acceptable 
quality from the highly compressed multimedia 
files they have to work with. 

Do-it-yourself Web authors, though, are gener- 
ally the kind of people who enjoy a challenge. 
Multimedia on the Web is in the same early 
stages as the Web itself was only a few years 
ago. There are technical difficulties, but inter- 
est and use are growing. Use the information in 
this chapter to get started now while it's still 
early. 



The Web has the potential to be the ultimate video network. There are just 
three little problems — the solutions to which will take many years to be 
realized: 

Problem #1: Bandwidth. The Web needs much more bandwidth for 
multimedia capabilities to grow. Video clips today are limited to tiny 
windows — much smaller than a regular TV picture, let alone HDTV and 
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other high-resolution standards. It isn't just the thin 56K connection to a 
typical home PC that's a problem. Corporate networks and the entire 
al Internet structure are not nearly ready yet for full-screen, full- 
ion video. 

Problem #2: Creative capability. It takes scores of people to put on a 
typical TV show, or run a radio station day and night, from video and/or 
sound people to editors to on-air talent. When you create your own mul- 
timedia, you're taking on — or arranging for someone else to perform — 
many of these jobs yourself. 

Problem #3: Copyright. All great artists borrow, but multimedia files are 
highly protected by copyright. Borrowing others' work and combining it 
with your own can get you in trouble. And just plain taking other 
people's work and distributing it as your own — well, that's certainly a 
problem. Be very careful to only distribute original work that you create, 
or others' work that you have written permission to use. 



Overall, however, the opportunity is tremendous. Multimedia — from the sim- 
plest animation or sound clip to a full-screen, surround-sound movie — can 
be much more engaging than static text and graphics. And solutions that 
allow you to add low-bandwidth multimedia to your Web page are becoming 
more readily available. 



So expect to see and hear more and more multimedia on the Web — and to 
be able to include it, where appropriate, in your own Web pages right away. 



Animating \lour GlFs 

Using animated GIFs is the simplest, cheapest way to liven up your Web page 
with multimedia. It's worth trying to create animated GIFs and host them on 
your Web page even if your real goal is to add other multimedia files to your 
site — the experience you get with animated GIFs will help you with other 
multimedia efforts you make. 

Most people know that a movie is simply a series of still pictures. An ani- 
mated GIF is like a short movie — anywhere from a pair, up to a couple of 
dozen GIF images that, when displayed in sequence, create the illusion of 
motion. Think of an old-fashioned flip book; you flip through the pages, and 
the drawings on each page seem to come alive as a single, moving image. 

The big advantage to animated GIFs is that there's no special software 
needed to host them on your Web server, nor to play them on the user's 
machine. You don't have to have any special artistic talent or pay anyone a 
licensing fee. And if you don't want to take the time to create your own ani- 
mated GIF image, there are literally thousands available for free on the Web. 
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Photo-animated GIFs 



^ppTG'ULlTCk nrrfeTH — VR is short for Virtual 
Reality — is a technology that uses images to 
create 3D objects and 3D interactive scenes on 
the Web. You can create a similar effect with 
animated GIFs, 

To create an animated image of a product or 
other object — even a person's head — take a 
series of digital photographs of any "thing" 
from, say, 8 or 16 different, equally spaced 
angles. Use a photo-editing program like Adobe 
Photoshop to make each image as small as 
possible. Then combine the images, in order, 
into an animated GIF, as explained in this chap- 
ter. The resulting animation is called an object, 
or object movie. The effect is amazingly detailed 
and realistic. 



Less obvious in their usefulness, but perhaps 
even more interesting, are animated scene shots. 
To create one of these, stand with your camera in 
an open area — hopefully an interesting one — 
and take a series of shots at evenly spaced 
angles, gathering 8, 16, or some other even 
number of shots. As with objects, make the 
images as small as you can, and then combine 
them into an animated GIF. The resulting image — 
called a panorama — gives the impression that 
the user is inside a scene, looking around. 

Like any other creative enterprise, you can put 
as much time into animated GIFs in general, and 
photo-animated GIFs in particular, as you're 
willing to spend. Afew people have even made 
a living at interactive photography. 



There are many ways you can create GIF animations and deploy them on 
your site. Not all of the things you can do are obvious: 

Buttons and icons: Buttons and icons on your Web site are intended to 
get users' attention and help them navigate. Animating them definitely 
gets users' attention. Animated buttons and icons are freely available in 
many places on the Web. 

«* Initial letters: A "drop cap" is a big capital letter used to add an eye- 
catching beginning to an article (see the first letter of the first word of 
this chapter for an example). An animated drop cap is even more eye- 
catching! (Or distracting, depending on how you look at it — no pun 
intended.) 

V Humanicons: You can use animated images of people as human icons, 
or "humanicons." Images of people are very attention-getting. Drawn 
images are pretty compelling. Photographs are very compelling. See the 
sidebar, "Photo-animated GIFs," for details. 

**" Product shots: You can use drawn or photographic product images to 
bring attention to your products and give visitors an experience — they 
feel like they are picking the product up and looking at it. 
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Advertising: You can use any or all of these ideas to advertise on your 
site. You can use traditional, paid advertising, or internal "advertising" 



jvhatever links on your site you want people to click most. 



creativity: You can come up with things that no one has ever 
thought of before. Hamster Dance, a briefly famous Web phenomenon, 
was a page full of animated GIFs of hamsters and other rodent-like animals 
doing a Macarena-type dance. (For a look at the original Hamster Dance, 
at least how it looks in IE, see accpc . com/hamsterdance . html.) Come 
up with your own ideas! 



It's easy to overuse animated GIFs. The same icon that looks cute the first 
time someone comes to your site might be annoying by the fifth time. Deploy 
animated GIFs anywhere on your site that they make sense, but don't hesitate 
to remove some if the effect becomes a bit overwhelming. 



finding animated GlFs 

The easiest way to get started with using animated GIF files in your Web 
pages is to use files that have already been created. You can find animated 
GIF files ready to plug into your Web page at a number of sites on the Web. 

Smaller sites with fewer files are more likely to make the files available for no 
obligation on your part. Larger sites with large file libraries are more likely to 
want something from you in exchange. You can use a search engine to look 
up the term "animated GIF" and find both kinds of sites. 

One big GIF site is 2CooI Animations, at gif animations . com. This site is a 
little less polished than Animation Factory, but everything on it — including 
20,000 graphics — is free. You can't use the animations for business purposes, 
though. 

Another leading site for animated GIFs is Animation Factory, at www . 
animf actory . com (see Figure 17-1). However, they're now a premium site. 

Although you can buy a membership to a premium site that gets you access to 
over thousands of animations, with no requirement that you link to anyone's 
site, we suggest that you try the free ones first. Free animation categories 
include buttons, text, people, events, computers, and many more. 

Use these sites, and others that you find on your own, as resources for ani- 
mated GIF files. And have fun! 
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Think before you link! It may seem tempting to link to a cool GIF animation or 
other illustration on the Web. When you link directly to a GIF file on someone 
else's Web site, the GIF appears on your Web page as if it belongs there. Two 
problems: It's bad for the owner of the other Web site, and it's bad for you. 
The owner has to pay for all the resources needed to serve up the animated 
GIF file. And you have to worry about the owner moving the file and "break- 
ing" your Web page! (A malicious site owner could even replace an image you 
like with one you don't like. How'd you like someone visiting your Web page 
to see an animated obscene gesture where they expected to see dancing ham- 
sters?) And finally, you may be breaking copyright law by making someone 
else's work appear within your Web site. 



Adding animated GlFs to yow Web page 

To add an animated GIF to your Web page, use the same steps you'd use 
when adding any other GIF to your Web page. In straight HTML, you use the 
image tag (<img>). For instance, to show an animated GIF called peace . gif , 
the syntax would be something like this: 

<IMG SRC= "peace.gif" HEIGHT=40 WIDTH=40 ALT="Peace, 
people ! " > . 
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animated GIFs to your Web page, you need to keep a few things in 
ore and after adding the file: 

i>* File size: File size is a concern with all graphics files, and much more 
so with animated GIFs. Because every frame of the animation is a sepa- 
rate graphics file, it's easy to have an animated GIF be hundreds of KB 
in size — and therefore take over a minute for users with modems to 
download. In most cases, it ain't worth it! You must either reduce the 
size of the file by editing each frame in the animation — or reduce the 
total number of frames — or put the animation on a separate page and 
label the links to it with a warning about the file size. 

Playback speed: Car companies always say "your mileage may vary." 
The same is true of animated GIFs. The user's Internet connection speed 
affects how long it takes the animated GIF to start moving, and the speed 
of his or her computer and graphics subsystem may affect how quickly 
the animation runs. Try your animation on some different setups to 
make sure it runs and looks the way you want it to. 

i>* Fun factor: Keep updating and moving your animated GIFs around on 
your Web page so that they don't wear out their welcome with your fre- 
quent visitors. If you're getting tired of your animated GIFs, chances are 
your users are too. 



Creating an animated GIF 

You need a special program to create an animated GIF, unless you want to use a 
resource editor to directly edit the contents of the GIF graphics file. One such 
program is Ulead GIF Animator; find out more about it at www . ulead . com. 

Use the user manual included with the program if you need help setting it up 
or need more details on how to use the program. But here is a set of simpli- 
fied steps to help you get your first animation done: 

1. Install Ulead GIF Animator on your machine. 

Use the instructions on the Web site to get the file installed. 

2. Create a few GIF images for your animation. 

Use the instructions in Chapter 12 to create a few GIF images in 
sequence. Make sure the images are all the same size. 

If you're at a loss for ideas, a short series of photographs of someone 
turning his head produces an interesting, if somewhat spooky, effect. 



3. Start Ulead GIF Animator. 
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In the Startup Wizard dialog, click Close to close the dialog box. Then 
use the FileONew command to open a new file. 



11 be asked to specify the canvas size; an object on a canvas is 
n in Figure 17-2. 



5. Enter the Width and Height of your images in the dialog box to set the 
canvas size to the size of your images. Click OK to accept the changes. 

6. In the Frame Panel at the bottom of the screen, click the Add Frame 
button to add a frame. Then click the frame to select it. Press the Ins 
key to insert an image into the selected frame. In the Add Image 
dialog box that appears, select the image that appears in the frame. 

Add each of the frames for your animation, in order. 

7. Click the Optimize tab to optimize your animation. 

GIF Animator is able to remove duplicated information from successive 
frames, reducing the size of each frame and the total file size of the 
animation. 

8. Click FileOSave to save your animation. Choose GIF as the file format 
from the pull-down menu, and then save your file. 

9. Insert your animation as a GIF file in a Web page on your hard disk 
and test it. Then publish your Web page to the Web and test again. 
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GIF Animator has a vast number of options beyond those used in this exam- 
ple (the user manual goes into detail about each option). However, the 

bove is a good quick-and-dirty way to get your animation ready for 
g on the Web. 




If you like GIF Animator and you're interested in doing more with graphics in 
your Web pages, Ulead has a number of other graphics-related tools that may 
help. Many are available in free trial versions, which is a great way to get 
started with new software. If you're interested, check out their offerings at 

www.ulead. com. 



The M~ ( for Multimedia) Files 




In the early days of the Web, people downloaded multimedia files, saved them 
to disk, and then started up a special player to view the files. Now, people 
embed multimedia files in Web pages and users view them "in place," with 
very little waiting, by using multimedia players such as Windows Media Player, 
RealPlayer, and Apple QuickTime. Macromedia Flash is also used to control 
multimedia playback. 

Using multimedia causes some of the same problems as using graphics files, 
only more so. Many users don't have the right players for viewing multimedia 
and don't know how to get the players and set them up when needed. The 
players themselves can cause annoying problems — like system crashes, 
frequent alerts about necessary updates, and annoying promotional e-mail. 

If a user doesn't have the right multimedia player (or worse, doesn't know 
whether she has the right multimedia player) that can be a tremendous 
source of frustration. More frustrating still is the effort to download and 
install the right multimedia player. If you use multimedia files on your Web 
site, make sure to add information to the Web page that tells users what 
player each file requires. You should also provide a link to a site where users 
can download the correct player. 

Performance is also a problem. Waiting as long as several minutes to down- 
load a small-sized, brief video clip is frustrating. And the sound quality of 
many video clips is poor. Test their quality before making files available. 

However, when you get multimedia working right, they can spice up a Web 
site like nothing else. Just look at the tremendous popularity of the MP3 
format for transmitting music over the Web. Operating at nearly the level of 
quality of FM radio, MP3 files have spawned a whole culture of music trading 
and sharing on the Net. (Unfortunately, at this point much of the sharing is 
still MP3 files of copyrighted songs that haven't been legally published or 
downloaded from the Net.) 
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The secret to MP3 is the widespread use of compression technology that 
makes relatively small files with quality near what people are used to hearing 
dio. It will take a new generation of compression technology to create 
ywhere near as good as TV. At that point, expect an explosion of 
movies and TV shows on the Net that will rival the MP3 phenomenon in 
importance. 



For now, the most important players for Web multimedia are 

i>* Real Networks RealPlayer: RealPlayer is a plug-in for real-time playback of 
audio and video files that works pretty darn well. The user of a RealAudio- 
enhanced Web site typically clicks a link to get an audio or a video clip. A 
reasonably brief pause ensues while an initial part of the file downloads, 
and then sound or a video clip starts playing. The file is streamed in real 
time, meaning that no big file is stored on the user's hard disk. (Streaming 
also means that a faster Internet connection produces better sound qual- 
ity) See the sidebar, "I stream, you stream?" for details. 

Windows Media Player: Microsoft is trying to take back the multimedia 
player lead from Real with its own, similar offering. Windows Media 
Player supports most of the same formats as RealPlayer and comes bun- 
dled with just about every PC. However, RealPlayer is now moving ahead 
with deals with Apple for QuickTime interoperability, so Windows Media 
Player may still be playing catch-up for awhile. 

V Apple QuickTime: QuickTime is Apple's multimedia technology that has 
become the industry standard for video editing and high-quality video 
playback on computers. QuickTime VR is an offshoot of QuickTime that 
creates high-resolution virtual reality panoramas and objects. Most 
QuickTime content is not streamed; users have to wait until some or the 
entire file downloads before it will play back. Although this reduces 
immediacy, it allows improved quality and greater flexibility for the user. 

The QuickTime player comes bundled with many computers and sup- 
ports all kinds of multimedia formats, including animation, sound, 
QuickTime VR, and QuickTime video clips. A large percentage of the 
movie files on the Web are QuickTime files. QuickTime is easy to use in 
your Web page, and no licensing or server fees are involved. Newer ver- 
sions of QuickTime support streaming, so expect to see more streamed 
QuickTime content over time. 

Macromedia ShockWave/Flash: The ShockWave plug-in allows presenta- 
tions and experiences created in Macromedia Director to be played back 
over the Web. Figuring out Director is no mean feat, but luckily you don't 
need to understand Director in order to use the powerful ShockWave 
tool, which delivers multimedia experiences over the Web. Flash is a 
simple format for delivering animations in your Web page and is rapidly 
becoming popular. If you are a Director user, or want to become one, or 
if you're interested in Flash, run, don't walk, to the Macromedia Web site 
to get more info about Shockwave and Flash. 
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ors of video files. (We'll just 
assume sound is included.) The first type is 
streaming video. Streaming video is a lot like a 
TV/VCR combo with a very, very small screen — 
you click the Go button and, after a few sec- 
onds' wait, you start seeing video. Users can 
pause, rewind, orfast-forward. Streaming video 
files are experienced by the user with minimal 
hassles, assuming thatthe userhasthe correct 
player installed. 

Streaming video files require special software 
on the Web server to synchronize the trans- 
mission and reception of each frame in the 
video file. Usually, it costs money to either buy 
the software or to rent space on a server that 
supports streaming. For instance, the low-end 
version of RealNetworks' streaming server 
recently cost just under $2,000. 

The second type is a downloaded video file, for 
which some or all of the movie clip must be 
downloaded to the user's computer before the 
video can be seen. Downloaded movie files 
make the user wait longer but are easierforyou 
to manage — with either type of file, you don't 



need special software on your Web site. 
However, you may have to pay your Web host 
extra for the many megabytes of data that must 
be sent to support even moderate numbers of 
users of video clips. 

But just because it can be prohibitively expen- 
sive to host your own streaming video files 
doesn't mean you can't add video-related con- 
tent to your Web page. Just create external 
links to otherpeoples' clips! (Do make clearthat 
you're linking so that you don't run into the prob- 
lem of making someone else's work appear to 
be your own.) If you have a particular interest, 
an index of current, interesting video clips in 
your area is bound to be interesting and valu- 
able to your users. Include brief summaries or 
reviews, and you'll save your site visitors a lot 
of wasted time. 

There are also new video hosting services like 
www . youtube . com and videos . google . 
com that avoid many of these problems, and may 
reach a wider audience. Check out all the 
options before you proceed. 



To find out more about how to use multimedia on the Web, start by checking 
out the following URLs: 

www . real . com 

www . microsoft . com 

www . apple . com/quicktime 



Adding a QuickTime Video File 

Many different multimedia formats exist, each with its own strengths and 
weaknesses. But no other multimedia format is as widely accepted, capable, 
or supported by so many different multimedia and Web page creation tools 
as QuickTime. Adding multimedia to your Web page is easy with QuickTime, 
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and using QuickTime-based multimedia is likely to be easy for your users as 
well. Here are the necessary elements for a successful QuickTime Web pub- 
perience: 




Multimedia content: You need a QuickTime multimedia file to put in 
your page. Dozens of multimedia tools create QuickTime multimedia; for 
starters, use one someone else has created and that's available for free 
re-use. When you're ready to create your own, look for tools at www. 
apple . com/quicktime. 

HTML commands: Some Web tools support embedding of QuickTime 
content directly. But unless you have such a tool, you need to write 
HTML commands to embed QuickTime content. Luckily, the commands 
are simple; an example follows shortly. 

f* QuickTime and the QuickTime plug-in: You and your users need the 
latest version of QuickTime and the QuickTime player. (Many versions of 
QuickTime include QuickTime VR support as well, adding virtual reality 
to what you can do with QuickTime.) Many of your users may have the 
latest version of QuickTime, but many may not. To help your users get 
updated, provide a link to the QuickTime Web page at www . apple . com/ 
quicktime. 



QuickTime is a big program! Users who don't already have QuickTime on 
their machines have to download it from the Web, and several megabytes is 
a lot to ask your users to download. However, doing so gives them a lot of 
capability. Be aware that you may get some questions and complaints about 
the download hassle. 



You don't have to pay fees or sign special licenses before using QuickTime, as 
you do with competing technologies. From a business point of view, using 
QuickTime is as easy as putting a GIF or JPEG image in your Web page. To see 
some new QuickTime clips, visit www. apple . com/hardware/ads/. 

For more information, visit the QuickTime VR home page and the Berkeley 
Macintosh User's group QuickTime authoring site at the following Web URLs: 

www. apple . com/ quicktime/ technologies /qtvr/ 
www. judyandrobert . com/quicktime/ 

Here are the steps to add a QuickTime movie to your Web page: 

1. Install QuickTime and the QuickTime plug-in on your own machine. 

To download these files, go to the QuickTime software page at 
www. apple . com/quicktime. 
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2. Create or obtain a QuickTime movie — animation, sound, video, or VR. 

i— * ■ Use a Web search engine to search for "free QuickTime," or visit sites 

J 1T\ f\ f \ L^(^^ecially U.S. Government sites such as eosweb . larc . nasa . gov/ 

I— ^ I V/ ^/ I—/ \J \J ■ \^OCS/Teacher_Notes/erbe_video.html-note that 

capitalization matters for this site) to find a clip that 
you can use with minimal or no restrictions. 

3. Embed the movie in your Web page. (If you're using Netscape 
Composer, click the <HTML> Source tab at the bottom of the page so 
you can add the following HTML tag directly.) 

Use the embed HTML command. In its basic form, for a file named 
f ile .mov in the same folder as the Web page, it's very simple: 

<embed src= " f ile .mov"> 

You have additional options when you use the embed command with the 
QuickTime plug-in; for details, see the QuickTime Web page (in particu- 
lar, visit www. apple . com/quicktime/ technologies /automat ion/). 
But try the simple command shown here first to make sure that you 
don't accidentally introduce a problem when you try to add options. 

4. Test it on your own machine. 

Test the Web page by opening it in Internet Explorer and seeing if the 
movie acts properly. Then test in Netscape Navigator or Firefox. 

5. Upload the changed Web page and the QuickTime file to the Web and 
test, as described in Chapter 16. 

Congratulations — you're a multimedia Web publisher! 



Adding an MP3 Audio File 

MP3 audio files bring with them many questions. The quality of the audio is 
just okay, and many of the files are illegal copies. They are, however, 
extremely popular, and a whole industry of sites — even new playback 
devices — has sprung up around MP3 and related formats. 

Creating MP3 files is a lot of work, and you need to search the Web for the 
right tools and resources to do it. Or you can search for a license-free MP3 
file. When you have an MP3 file — fully legal ones are easy to find — it's a 
snap to put one on your Web page. Just follow these instructions: 

1. Get an MP3 file. 

Just search the Web using any search engine; it won't take long. 



Part V: Getting Interactive 



2. Link to the file from your Web page. 



DBooks 



Use the <a> (for anchor) HTML command. Creating a link for an MP3 file 
nother Web server is as simple as it for any Web page: 

<a href = "http : / /artists . iuma . com/ site- 
bin/mp3gen/2 3 182 /IUMA/Bands/Abunoahlll /audio/A 
bunoahIII_-_Clay_Jar .mp3 " >A Christian MP3 
f ile</a> . 



The file here is just one example. Many thousands more are out on 
the Web. 

3. Test the link and the file on your own machine. 

Test the MP3 file by opening it from the Web page and playing it back. 

4. Upload the changed Web page and the MP3 file to the Web, as 
described in Chapter 16, and test. 

Congratulations — you're a Net DJ! 
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In This Chapter 

Adding a site counter, guestbook, and form to your page 
Incorporating CGIs 
Programming your pages 
Going beyond HTML 



f 

■ nteractivity is what distinguishes the best Web sites from the rest. In years 
«C of work creating and deploying Web sites, we have seen that many of the 
best sites are those at which users enter data and then can come back to add 
to it, manage it, or see if someone else has reacted to it. 

E-mail is a good example of this kind of interaction. You struggle over what 
to say. You send your message out to one person, or two, or dozens. Then 
you invest countless hours replying to the replies, checking if everyone who 
was meant to get your message actually did, even phoning or meeting with 
people to follow up. Web sites that can capture the same kind of interactivity 
do very well. 

But interactivity is much harder to add to your Web site, and to manage, than 
"brochureware" — a Web site that simply displays your message, however 
well-written and laid out, to the world. There are real technical barriers to 
interactive sites because you need sophisticated databases to store and 
update data so that it can be accessed by scores or thousands of people. 
The same Web hosting providers who are happy to give you a free or low-cost 
basic Web site are much less likely to want to help you create and maintain 
fancy databases. 

Luckily, you can get started simply. In this chapter, we introduce you to easy- 
to-add interactive features, such as site counters and guestbooks that many 
hosting providers offer for free. If not, you can get these features for free — 
or at least, for the cost of including an ad on your site — from several inde- 
pendent sources. We then go on to introduce you to advanced features like 
CGI scripting and ActiveX programming that you may not tackle soon, but 
will at least want to understand for future reference. 
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several forms of interactivity for your Web page that have been 
canned and made easy for you to implement. Among the interactive features 
you may want to add to your Web page are 

i>* Site counters: A site counter counts the number of times a Web page has 
been accessed and displays the count on the Web page. Site counters let 
you — and your Web site visitors — know how many times the page has 
been accessed. You may want to add a site counter to your Web page; if 
you have a multipage Web site, you may even want a site counter on 
each page. 

Guestbooks: kguestbook allows Web site visitors to leave comments. 
Guestbooks can be a lot of fun; they can even allow people a way to get 
to know each other through your site. Imagine a family site where every- 
one signs in and leaves a "Happy Holidays" message for each other. 

Forms: A form allows the user to enter data using entry boxes, pull-down 
menus, check boxes, and so on. Creating a form using HTML commands 
isn't the hard part; unfortunately you need a computer program, running 
on a Web server, to handle the resulting data. The computer program 
accesses the data using something called a CGI, or Common Gateway 
Interface. 



A message board, or forum, is like a guestbook, but with much more flexibil- 
ity. Users can post messages, reply to one anothers' messages, start new 
topics, and more. Setting up and managing a message board requires a lot of 
work — after all, you don't want your friends and family to see a rude mes- 
sage some idiot left, do you? But if you're willing to do the maintenance work, 
having a message board can be very rewarding as well. To try using a free 
message board service, visit www. amazingf orums . com. And remember 
blogs as well — see Chapter 6. 

Each of these forms of interactivity needs some cooperation from the Web 
server that's hosting your page, or from some other Web server. Why is that, 
you wonder? Well, think about it a bit. 

When you have a site counter on your Web page, the counter goes up by 1 
every time the page is displayed. (Actually, the counter goes up by 1 every 
time the counter is displayed. If the user visits your Web page, then clicks 
away before the part of the page with the counter on it is displayed, the 
counter doesn't go up.) How does this happen? 

When the counter file is requested by some HTML code in your Web page, it 
reads a database to find out how many times the request has been made in 
the past. That's the visit count that it displays. A program notes the request. 
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It updates a database with a request to add 1 to the number of times the file 
has been accessed. The next time the counter is requested, the number for it 
higher. All of this takes a bit of computer programming. 




The same is true for guestbooks — data is being stored somewhere, updated 
with new additions, and displayed on request. Any time data is being stored 
and modified, some kind of computer programming is involved. Sometimes 
you can use a canned, prewritten program to do the work. However, someone 
still had to write and test the program, and it still has to run every time the 
functionality is used. 

Computer programs can be dangerous! They can, unless carefully prevented 
from doing so, read and write data — which is great when it's done right, but 
is disastrous when done wrong. (Just think of computer viruses for an exam- 
ple of a computer program doing the wrong thing.) The same people who will 
happily host your Web page on their server for free, or at a small price, will 
suddenly become very unhappy if you try to run your program on their 
server. The interactive features you incorporate into your page, even simple 
ones like site counters and guestbooks, are carefully managed by the admin- 
istrators of Web servers. Ordinary people often aren't allowed to put their 
own programs to support these features on their host's Web server. 



Usinq site counters 

A site counter is a graphic that goes on your Web page, just like any other GIF 
image, but it has a rather magical property: It displays the current count of 
the number of pages your Web page has been displayed. (Of course, if you 
want a lot of visitors and you're only getting a few, that property may not 
seem so magical.) 

A site counter is valuable if you care about how many visits your site is 
getting — information that's really nice to know if you've created a site for 
fun, and vital to know if you've created a site for business purposes. 

Your access to site counters depends on where your Web page is hosted: 

u* Yahoo! GeoCities pages: For GeoCities users, Yahoo! hosts your Web 
pages and the counter software. The same people who host your Web 
page run the program and database that support the counter, so you 
don't have to do anything tricky. Start by creating your Web page on 
Yahoo! GeoCities, as described in Chapter 2. Then follow the instruc- 
tions at geocities .yahoo . com to add a site counter to your site. 
Figure 18-1 shows the various counter styles available from GeoCities. 

u* AOL Member pages: As on GeoCities, if you create your Web page at 
hometown . aol . com, as described in Chapter 4, you can use the built-in 
Web counters there. Just follow AOL's instructions. 
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f" Other hosts: If you have your site hosted by another free or paid Web 
pages service, or by an ISP other than AOL, you may have access to a 
free Web site counter feature. If so, use it, as described by your Web 
page's host. Otherwise, see the next bullet. 

Web-based service: Several "free" Web-based services provide counters 
for users. (We say "free" in quotes because many of them require you 
to include an ad or link to their server, though they don't charge money.) 
Microsoft has the leading such counter, though it's a paid service at this 
time. Find Fastcounter at www. microsoft . com/smallbusiness/ 
online/traffic -analysis/ fast- counter- standard/ detail . 
mspx. Check it out, or search for other free Web-based counter services 
on the Web. StatCounter, at www . statcounter . com, is a favorite of ours. 

i>* Run your own server: You can run your own Web server software on 
your own computer over your own Internet connection. Then you can 
create and run any computer program on the server that you want! This 
is a much more difficult approach than we recommend in this book, but 
if you want to do a lot with your site, having this degree of control may 
be worth it. The book Building a Web Site For Dummies, 2nd Edition, by 
David A. Crowder (Wiley) has the instructions and software — including 
CGIs — that you need to get started. 
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Adding questbooks 




pok is a place on your page or site where visitors can leave comments. 
' a lot of activity in your guestbook, users will return to your site more 
often to see what's new and to leave additional comments; eventually, new 
users will visit and return to check the guestbook. As you can see, a guestbook 
can be great for making your site more interesting and increasing traffic to it. 

As with site counters, a guestbook requires that a program run on a Web 
server somewhere, store the data that users enter in it, and display the data 
when needed. Also as with site counters, your access to guest counter func- 
tionality depends on which type of service provider hosts your Web page: 

Yahoo! GeoCities pages and AOL Member pages: If you create your 
Web page at geocities .yahoo . com, as described in Chapter 2, you 
can use the built-in guestbook there. Same thing if you create your Web 
page at members . aol . com, as described in Chapter 4. With the same 
people supporting your Web page and your guestbook, you just need to 
follow the on-site instructions and everything will work. 

Other hosts: For other hosts, check to see if you have access to a free 
guestbook feature. If not, use a free Web-based service, as described in 
the next bullet. 

Free Web-based service: There are a few Web-based services that sup- 
port a guestbook. They may be truly free, free with the caveat that you 
display an ad or link on your page, or require a fee for use. You can find 
an ad-based or paid guestbook at guestbook. mycomputer . com. 

Run your own server: You can run guestbooks all day and all night if 
you take on the challenge of running your own Web server. The afore- 
mentioned Building a Web Site For Dummies, 2nd Edition, by David A. 
Crowder (Wiley) will help you get started. 

A chat room can be even more fun than a guestbook. For a good one that you 
can try, go to www. icq. com/panels /ircqnet. 



Incorporating forms and CGls 

A form is just what the name implies: a place where a user can enter data, 
such as name, e-mail address, and other contact information. Figure 18-2 
shows a simple form used by Netsurfer Digest for signing up subscribers. 

Forms have been around for years, and most books about using HTML 
describe them. Getting data from users via forms is pretty easy. What hap- 
pens after that is more complicated. 
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Processing the data from a form requires one or more computer programs. 
A common way to handle data is to use a CGI script and an application. A 
CGI script, sometimes simply called a CGI, is a Common Gateway Interface 
script — a program that sends the data to an application that you create. 
The CGI script runs on the server that hosts your Web page. CGI scripts 
are different on NT, UNIX, and Macintosh. Many CGI scripts are written in 
the C programming language or PERL, a cross-platform scripting language. 



To run a CGI script, you need the permission of the sysop (system operator) 
responsible for the server that hosts your Web page. Sysops are paid to pro- 
tect their systems from harm, so getting your sysop to run an unknown pro- 
gram on his precious server may not be possible. Many Web hosts, including 
Yahoo! GeoCities (see Chapter 2) and AOL (see Chapter 4), have prepackaged 
forms or CGI packages that handle common tasks such as counting visitors, 
allowing users to register, and more. Finding and using one of these prewrit- 
ten packages is a good intermediate step toward creating your own CGI 
scripts and applications. 
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For basic information about CGI scripting, check out the online tutorial, CGI 
Programming 101, at www. cgilOl . com/class/. Phorm Jr. is a powerful 
cessor; go to www . phorm . com to find out more. 



Programming \lour Pages 

You can do an awful lot on the Web with simple text and graphics, and adding 
interactive features such as a counter or guestbook extends your powers 
even further. However, to really do business on the Web and support interac- 
tivity, you need to consider doing some programming. 

Web programming is a complicated topic that is beyond the scope of this 
book. However, you may want to experiment with programming on your own. 

For a long time, a big advantage of living in certain areas was the improved 
access such places had to large and specialty bookstores. For example, when 
the early editions of this book came out, both authors lived in Silicon Valley, 
home to the excellent Computer Literacy bookstores — which gave the 
authors a leg up over people living elsewhere. Now, through the Web, most 
people can find whatever books they need. And a while ago, partly due to 
competition from Internet bookstores, the Computer Literacy bookstores 
went out of business! 



DropBocws 




To find computer books, you can start by looking at the following URLs: 



www . amazon . com 
www.barnesandnoble . com 
www . booksmatter . com 




You may also be interested in online courses on these and other topics. To 
see what's available from EducationToGo, an industry leader, check out www . 
educationtogo . com. 



Many, many resources 



There are many resources on the Webfor learn- 
ing advanced topics such as those described 
here. However, if you're trying to get a good 
overview, it can be worthwhile to go to one or 
two major resources, where the different pieces 



tie together in an understandable way. Try these 
resources to get started: 

www . about . com 
builder . cnet . com 
www . webmonkey . com 
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t is a very popular and widely used scripting language that gives 
eased control over your Web pages without true programming. You 
can learn quite a bit by simply searching online for the word JavaScript. To 
go further requires more books, more training, and more work. Want to 
read JavaScript For Dummies, 4th Edition, by Emily A. Vander Veer (Wiley), 
anyone? 



Database interactivity 

Tying your Web site to a database is a way to supercharge it beyond anything 
we demonstrate in this book. Technologies whose names you may have heard 
or seen within a Web page URL, such as ASP (Active Server Pages) and PHP 
(PHP: Hypertext Preprocessor), are used for this purpose. Some free hosting 
services enable you to set up your own database and tie it to your Web site. 
One of them, from a Web hosting company called Brinkster, Inc., is at www. 
brinkster . com. 



Going beyond HTML 

Although the simplicity and flexibility of HTML have been essential to the 
success of the Web, HTML does, of course, have limitations. Two major lan- 
guages, Dynamic HTML (DHTML) and XML (extensible Markup language), 
address many of the limitations. Most, but not all, users have browsers that 
support these technologies. 




Style sheets — Cascading onto the Web 

Cascading Style Sheets, commonly known as CSS, is the name of a standard for 
defining formatting within Web pages. You can use CSS to quickly change the 
look of a Web page — or a whole series of Web pages. 

Unfortunately, CSS was developed so quickly that in its early days browser 
support was inconsistent and buggy. Now, you can use CSS with good results 
across the great majority of browsers currently in use. 
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However, there are still enough users out there with inconsistent CSS support 
to make deploying it a bit tricky. Get your Web pages looking and working 
out CSS before you consider learning more about, and using, this 
standard. 



HTML gets Dynamic 

Dynamic HTML, or DHTML for short, is an extension of HTML that allows multi- 
ple layers of information to be sent to the user during a server connection. The 
user only sees some of the information at first. Additional information can be 
unveiled as time passes or as the user undertakes different actions, all without 
having to reconnect to the server. For instance, this capability allows a Web 
page to change its appearance based on options the user selects, all without 
having to download more data from the server. 

Only the 4.0 and later versions of Microsoft Internet Explorer and Netscape 
Navigator , plus all versions of Firefox, support any of these Dynamic HTML 
features, which leaves out users of older browsers. Even though most users 
have browsers new enough to support it, DHTML is not yet widely used on 
the Web. 



XML K-es out HTML 

HTML is a subset of an overall standard called Standard Generalized Markup 
Language, or SGML. (We bet the people who created SGML didn't know what 
would happen with their invention!) XML, or extensible Markup Language, is 
a superset of HTML, which has been created within the overall SGML stan- 
dard. XML allows complex data structures to be built into a Web page. 

For example, with XML, authors can create database applications and deliver 
them across the Web. XML is being deployed first on intranets and extranets — 
shared networks used by business partners — because that way organizations 
can ensure that all Web authors and users use the same XML definitions. If 
you're responsible for intranet- or extranet-related activity, keep an eye on 
this one. 



The Web enters the tutenty- first century 

Because of its flexible nature, the Web has the theoretical capability to support 
almost anything that can be done or imagined on a computer. As the connec- 
tion speed available to the average user improves, as more technology is used 
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in advanced Web pages, and as users move up to more capable browsers, more 
and more will be possible. The trick is not to chase down any of the new path- 
pre they settle down into widely used standards. Develop your skills in 
eas that make the Web useful, productive, interesting, and fun today, 
importantly, that will make your Web page attractive to your target 
users. Using the capabilities of today's mainstream Web is the best way to pre- 
pare yourself to take advantage of the advanced Web that will be here the day 
after tomorrow. 
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In This Chapter 

Do think about your target audience 

Do use good sites as models 

Do think before you create 

Do get permissions for content 

Do use links to outside sites 

Do use graphics and multimedia 

Do test your pages 

Do publicize your site 

Do ask for feedback 

Do update your site 

#••••##•••••••••••#••#•#•#*###••••#•••••••#•••••# 

r. Do-Bee was a star of the Romper Room TV show of the 1960s — kind 
of a Teletubby with wings. He was famous for words of wisdom that 
began, "Mr. Do-Bee says . . ." 

Well, if Mr. Do-Bee were a Web author, here are ten things he would definitely do. 




00 Think About \lour Target Audience 

Who is your Web site targeting? A little thought along these lines can make 
your pages much more appealing to your visitors. Before you begin creating 
your Web site, choose the right look and feel and a style of presentation that 
is appropriate for your audience. 

For instance, if your target audience is your family, keep your site simple and 
fun; but if it's a business site, keep the personal stuff well separate. 



Include links that your visitors find interesting, not just the ones that you find 
interesting — unless that's the point of your page, of course. 
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In addition to using good sites as models (see the following "DO"), research 
other media, such as newspapers and magazines that have an audience simi- 
rs (check the articles and the ads to determine this), to find good 
xamples. 



00 Use Good Sites as Models 

To say that the Web has many good sites is to make a huge understatement. 
Therefore, it is also an understatement to suggest that ignoring those good 
examples when designing your own site is not the best idea. Take a look around 
and find the designs that work. Many top-rated sites have settled on relatively 
simple designs. Think about why each design you like works well. Is it 

IV The use of color and the layout of the Web page? 
V The fact that the site loads quickly? 
The well-organized content? 

Google is a good example of a site that is well-focused around a key observa- 
tion: speed matters. The Ford site, which could hardly be more different, also 
does a good job for their customers — by giving cars pride of place. 

Note what works and why, and then strive to duplicate that effect in your 
own Web pages. Look for conventions in presenting information that Web 
users have grown accustomed to, neat design ideas, and various types of 
content. You'll be surprised by how many ideas you get from this huge 
reservoir of Web expertise — the Web itself. 



00 Think Before \lou Create 

A surprising number of people just jump in and start throwing around text 
and HTML tags with no clue about where they're going or what they want to 
accomplish. That approach is fine if you just want to play around; in fact, it 
can be a lot of fun. But if you want to make a good impression on the Web, 
sitting down and thinking about a few things ahead of time really pays off. 

Sketch your ideas on paper. Then describe them to someone else and ask for 
feedback. This prep work forces you to consider things that you may not 
think about otherwise: 

V Page layout 

V Graphic design 

1 V Relationship between pages 
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Target audience 
Content structure 



grouping 



All these issues and more, when properly considered and acted on, can make 
your site a first-class Net surfing experience. 



00 Get Permissions for Content 

You can easily peek at the HTML source of any Web page, and that's legitimate, 
and a good way to figure out new design techniques. But you can also easily 
grab any content that exists on the Web, even privately owned content that 
belongs to others. However, the fact that you can easily grab others' content 
does not make doing so right or legal. It's also not necessary. 

You can find a great deal of public domain content, and getting permission 
to use some private content is not all that hard to do. If a Web page doesn't 
explicitly say that its content can be freely borrowed, assume that it's copy- 
righted or otherwise protected, which means you should ask before borrow- 
ing any of it. Many people are happy to let you use their content as long as 
you provide proper attribution and reciprocal links so that they can gain 
exposure to new Web users who visit your pages. In the process, you may 
just gain new friends or business contacts, as well as avoid legal problems 
down the road. (And in case you get tempted to borrow quietly, keep in mind 
that word of unethical practices gets around quickly on this amazing global 
network.) 



00 Use Links to Outside Sites 

No matter how great your content is, you're wasting the most important fea- 
ture of the Web if you don't include links to sites outside your own. No matter 
what your topic, you can find complementary sites out there. Giving your 
visitors links to those sites is not only courteous — it's part of the foundation 
on which the Web was built. 

If you research your links carefully and organize them well, your links can be 
a valuable resource for others. In your own Web surfing, you've probably 
found that one of the best experiences on the Web is the serendipity of stum- 
bling upon some cool site that you had no idea existed. Give your visitors 
that same experience. Point them to the outside world. That's why it's the 
Web and not the Pit. 



328 Part VI: The Part of Tens 



00 Use Graphics and Multimedia 



£ f\i^attraction of the Web is that it's designed to present graphical infor- 
mation; yet there are still many beginning Web authors who are intimidated 
by graphics and shy away from using them. Include pictures, icons, bars, and 
graphical menus in your Web page. Go ahead, try out transparent GIFs. 
Multimedia is a great addition, too, where appropriate; one or two sound 
files, a QuickTime movie, even a simple animated GIF can really liven up a 
site. 

The bottom line is that sites that carefully use graphics and multimedia are 
much more interesting than purely text-oriented ones. Give it a go. (But be 
prudent; see Chapter 20 for a complementary "DON'T") 



Testing your pages is easy. You probably don't send out a memo without 
spell-checking it. Similarly, you should not put up your Web pages without 
testing them. That means looking at your pages on your own machine before 
testing them on the Web — follow links, see how graphics and text fit 
together, and so on. 

Also, looking at your pages in different browsers doesn't hurt. If you can't do 
it, ask a friend or even a stranger to help. And, of course, don't forget to spell 
check your pages. 

After you upload your files to the Web, test again on your own machine, your 
friends' and neighbor's machines, any machine you have access to — you 
may be surprised by the differences you see. And if you really want a shock, 
ask a friend or family member to go to your site and click around on it, telling 
you what they think as they go along; the way they use your site is almost 
certain to be different than what you expected. 



Nothing is more frustrating than putting up a site that no one visits. 
Fortunately, publicizing your site is not hard. Add your site to the popular 
indexes, for example, through the excellent Submit-It site at www. submit- it . 
com. (Like many other such services, the Submit-It site charges a fee.) 




00 Test \lour Paqes 



00 Publicize \lour Site 



You can also post to appropriate Usenet newsgroups, put out a press release, 
send e-mail to friends and business contacts, or shout from the rooftops. 
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00 Ask for Feedback 



jlifV^^ e-mail address on your home page and ask for comments. You'll be 
amazed by what people say about your pages. (Some of the comments may 
even be complimentary!) People who have never before seen your site can 
offer a good, fresh perspective and give you feedback on things that you may 
not have previously thought about. 

Everyone can benefit from outside input. Criticism by your prospective audi- 
ence is not only useful, it's also educational. You can learn a lot about what 
people expect and want. Criticism can't hurt anything but your pride, and 
listening to it almost always improves your site. 



A static site is a boring site. True, it works for some purposes, but in general, 
if you want people to continually revisit your site, you must keep it updated. 
The best sites are those that continually provide new and interesting content. 
Include pointers to information that's frequently updated, like "Thought for 
the day" or "Links to new, cool sites." Let users know how often to expect 
updates and be sure to showcase new content. A "New" icon next to recently 
added or updated content can work wonders. 



BO Update \lour Site 



In addition to updating your site, update yourself! Broadening your knowl- 
edge of Web design, new trends and technologies, and what's "cool" at the 
moment can only help in improving your site. 
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In This Chapter 

Don't limit your audience 

Don't abuse Netiquette 

Don't "borrow" content without asking 

Don't abuse graphics and multimedia 

Don't forget <alt> tags and text versions of menus 

Don't forget the basics 

Don't start by setting up your own Web server 
Don't make your site hard to navigate 
> Don't forget the "World" in World Wide Web 
Don't be afraid to find out more 



Those of us who remember Mr. Do-Bee, who we mentioned at the start of 
Chapter 19, also probably remember Bozo the Clown, another TV charac- 
ter. (Ever hear people say, "What a bozo?") When someone did something 
wrong, it was a "Bozo no-no." Don't-don't do these no-no's. 



DON'T Limit \lour Audience 

Be careful when designing your pages not to inadvertently limit your audi- 
ence by using some oddball feature that can't be accessed by large numbers 
of people who use different Web browsers. 

Stick to basic HTML through HTML Version 4.0. Think twice before using 
HTML frames, Java programs, or ActiveX programs — some people won't be 
able to access Web pages with these features. Warn people if you use non- 
standard features. Often, providing alternative pages, such as text-only ver- 
sions of your pages, is worthwhile. 
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Don't feel as though you should limit your Web page, however, if using non- 
standard features and software is important to your goals for the page, 
luda^nks to the software that works with your pages — a link to the 
r^kJiyie site if you host QuickTime movies or a link to the RealAudio site if 
you include RealAudio sound, for example. 



aj&M*G/ Many features of Microsoft FrontPage only work if hosted on servers that sup- 
J£\ port FrontPage extensions. Other FrontPage features only work if the user is 
running Microsoft's Internet Explorer browser. Test your pages with a wide 
range of browsers and browser versions if you are using FrontPage to create 
your pages, and be prepared to drop FrontPage- or Internet Explorer-dependent 
features. 



DONT Break Netiquette Rates 

Using poor netiquette — the etiquette, or "Miss Manners" rule book, of the 
Internet — is easy to do, and it can bring you a lot of negative attention. If 
you make any serious offenses against good Internet practices, your Web ser- 
vice provider's server may remove your pages. And you can even get into 
legal problems. 

Avoid the following dubious practices: 

Spamming, or sending unwanted e-mail to publicize your site or sell 
things 

Flaming, or being fervently disparaging of other people or other Web 
pages 

Posting offensive material on your page without some kind of warning 
label 

Netiquette is an amorphous and evolving area of online behavior, so you may 
want to join a Web-oriented newsgroup where you can ask questions before 
publishing. Also, check out this site for in-depth info: 

www. albion . com/netiqiiette/corerules . html 



DON'T "Borrow" Content Without Askinq 

Make sure that content you get from the Web to use on your own Web page is 
labeled as being freely available for reuse, or else get permission to reuse it. 
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Many people are quite happy to help if you ask nicely and credit their work. 
The best part is that you make some good contacts with other interesting 
bu also keep the law on your side. 



bONl Abuse Graphics and Multimedia 



The biggest mistake that beginning Web authors — and some experts — 
make is overusing graphics on a page. Keep in mind that not everyone has a 
cable modem or DSL connection wired directly to his or her home PC; many 
folks around the world receive Web pages via a more limited 56K or slower 
modem. For most pages, keep your page size, including both text and graph- 
ics, under 50K. Here are ways that you can keep down your page size without 
sacrificing design flexibility: 

V Convert photos to JPEG format. 

V Use simple icons and banners — images without very many colors or 
complex textures — in GIF format. 

f* Lay out your site to limit the amount of graphics on any one page; add 
pages if you need to display more graphics. 

f" Use thumbnail icons to give access to larger images. 

All these strategies make your pages smaller and faster for others to down- 
load. Your Websurfers will thank you. 



DON'T Forqet ALT Text and 
Text Versions of Menus 

One beginners' mistake is not offering text versions of menus, which is 
needed because some people turn off graphics when surfing the Net, and 
others, who use special software to overcome blindness, can't see graphics. 

Some home users turn off graphics to speed things along, downloading only 
the graphics that they really need. Other people pay a high hourly rate for 
their Internet access and turn off graphics to save money on their connection 
time. Others may be looking at your Web page through a palmtop computer 
or Web-enabled cell phone with limited graphics capability. And some people 
who are visually impaired use the Web with software that translates text — 
but not graphics — into spoken words. (ALT tags do get spoken by this soft- 
ware, though.) 
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If your navigation bar or other menu-type items are in graphical form, pro- 
vide a text version as well, as we show in Chapter 15. Always use alt text to 
ext equivalents to your graphics, as we describe in Chapter 12. 
iT text is easy to do and makes it easier for all those people to access 
your content. 



bON'T Forget the Basics 

Your site may be the greatest thing since sliced bread, but if you forget to 
include contact information for yourself in the site, how will you find out that 
you misspelled "bureaucracy" all over the place? Similarly, you won't get 
many orders for your spiffy new widget if you put the ordering information 
five levels down in a Web page called "Fruit Bat Guano Statistics — 1876." 

More basics: 

v 0 Have a useful, search-engine-friendly title for each page. 

Include your e-mail address on your Web page. 
v* Include a copyright notice. 

«* If you create a Web site of more than 5 to 7 pages, add a site map. 
Give credit where credit is due. 

V Make the important info prominent. 

V Be ready to revise, based on user feedback. 



bONI Start by Setting Up 
Hour Ou)n Web Server 

You can find so-called "easy-to-use" Web server packages on the market, and 
Web server capability is being built into many Macs and PCs. But even with 
these efforts, buying, setting up, and maintaining a Web server can become 
the most expensive, most complicated, and most frustrating part of Web pub- 
lishing. Luckily, you can put your content on someone else's Web server 
using the free services we describe in this book, or you can use an inexpen- 
sive paid service, while you figure out the other tricks of the trade. Then, as 
your knowledge and experience grow, consider setting up your own Web 
server. 
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s often organize their pages so that their sites are hard to navigate. If 
your site has more than 5 to 7 pages, you should put some thought into how 
your visitors navigate it. Nobody likes wandering from link to link with no 
idea what is where. Likewise, users don't want to follow ten links to find one 
piece of information. 

Keep the relationship between your pages simple. Make clear which links are 
internal to your own site and which go out to other sites. Provide a site map or 
a common menu. And make navigation work consistently throughout the site. 



OON'T Forget the 'World" 
in World Wide Web 

Remember that your Web pages are available and accessible to the whole 
world. Think a bit about foreign audiences. Should you include content in 
multiple languages? Do you use colloquialisms that may not be understood 
by international Net surfers? How do your pages look to your overseas col- 
leagues who view them through a slow transoceanic Net link? Will your 
humorous or risque content offend someone in another country or culture? 

When you become a Web publisher, you also become a global citizen, and 
your Web pages play on a global stage. Think through the accessibility and 
meaning of your pages in advance. 



DON'T Be Afraid to Find Out More 

Web publishing is not rocket science. It is computer science, but it's relatively 
easy computer science. You're not trying to land the space shuttle here — 
and chances are, lives are not at stake. After you have your site working the 
way you want it to, experiment. Try weird things. Ask for feedback. Never be 
afraid to figure out complex and hard stuff. (It's only complex and hard 
because you don't understand it yet!) 

You can find so much neat stuff out there that can make your Web publishing 
efforts even more exciting — JavaScript, multimedia, new browsers and pub- 
lishing tools, Net-based games, and online business infrastructure. All this 
new stuff is understandable and usable by normal folks like you. Don't be 
intimidated. You can use all of it. (If you've come this far, you've got what it 
takes!) 
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In this part . . . 

■ his part includes useful information for your reference: 
% a glossary containing definitions of Web publishing 
terms, and an appendix of HTML tag definitions. 













Appendix A 

ei Words Worth Knowing 



7 his glossary defines important terms used in this book. To see where a 
term is used in the book, check the index. 

56K. The name of a faster standard for Internet access that is now used by 
most new modems. 56K is nearly twice as fast as the previous standards, 28.8 
Kbps and 33.6 Kbps. However, online access speeds are actually limited by 
U.S. government regulation to a top speed of about 53 Kbps, and your 56K 
modem may not even achieve that speed reliably, depending on the quality of 
the connection you get when you dial in. 

absolute address. A description of a file's location that starts with the 
domain name, machine name, or disk name on which the file is located. See 
also pathname and relative address. 

anchor. One end of a link between two files. When you look at a Web page, 
the underlined, colored text that you see is an anchor at one end of a hyper- 
text link. Clicking the text brings up another Web page, which is the anchor at 
the other end of the link. 

animated GIF. A GIF graphic that includes several slightly different images in 
sequence. Browsers that support animated GIFs display the graphics one at a 
time to create an animation. 

attribute. In HTML, an attribute is a qualifier added within an HTML tag. The 
attribute modifies the tag's purpose. For example, in the tag <img 
SRC="budpic . jpg">, the attribute is SRC (short for "source"). See also tag. 

blog. Short for "Web log," a form of Web site in which the author's frequent 
postings are recorded, usually with the newest posting first. Site visitors are 
often allowed to comment. Web logs use special software to prevent the user 
from having to set up or manage the Web page. 



broadband. Any kind of fast Internet access, whether by cable modem, DSL, 
or other connection significantly faster than the 56K top speed of a modem. 
Broadband connections are typically "always on" and do not require dialing in. 
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browser. A program used to look at World Wide Web documents. Mosaic was 
the first popular browser, followed by Netscape Navigator; Microsoft Internet 
is the current market leader. 



bulleted list. See unordered list. 



cable modem. A form of broadband access to the Internet that uses a cable 
TV connection. If the local cable company that serves your house offers this 
service, it's worth a look. 

Cascading Style Sheets (CSS). A language used to control the look of a Web 
page (colors, fonts, and so on), whereas HTML is used to control the struc- 
ture of the content (headings, paragraphs, and so on). 

clickable image map. A graphic that includes areas called hot spots, which, 
when clicked, take you to different Web pages or different locations within a 
Web page. Some large Web sites use clickable image maps on their home 
pages to entice the user to move farther into the site. 

Common Gateway Interface script (CGI script). A kind of program often 
used to transfer data from an HTML form to an application. The CGI script 
runs on the server that hosts the Web page with the form. See also form. 

definition list. A type of HTML list in which terms occupy a column on the 
left side of the screen and definitions occupy a wider column on the right 
side. 



DHTML (Dynamic HTML). DHTML is not a language but refers to the usage of 
three languages together in Web design: HTML, CSS, and JavaScript. 

domain name. A name that represents a Web site to the outside world. In the 
United States, the domain name can end in . com (for businesses), . edu (for 
educational institutions), . org (for nonprofit organizations), or the presti- 
gious . net (for organizations that are part of the structure of the Web itself). 
Newly added suffixes, which haven't necessarily caught on yet, include . biz 
and . firm. When visiting a domain that was created for an organization out- 
side the United States, you may see different suffixes that have been added to 
represent a country or region. For example, . uk signifies that the domain 
was created for the United Kingdom. The part of the domain that precedes 
the suffix, such as Stanford in Stanford, edu, is either the name of the 
group that puts up the Web site, or a name that attracts people to the site. 
Domain names can start with www if desired, but it's not always necessary. 

DSL. Digital Subscriber Line, a type of broadband Internet access that uses a 
phone line. Not available in some areas, but worth serious consideration if 
it's available to you. 
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electronic mail (e-mail). A message sent over a network from one computer 
user to another computer user. The most popular service on the Internet. 

noun ("I just got an e-mail.") and a verb ("E-mail me on that, will 
lso used as singular ("I just deleted an e-mail.") and plural ("I just 
deleted all my e-mail."). 



File Transfer Protocol (FTP). An Internet service for transferring files 
between different machines, including those that run different operating sys- 
tems. It's a commonly used mechanism for uploading Web pages to a Web 
site. 



firewall. Hardware, software, or a combination that protects a network from 
unauthorized access while allowing authorized access. 

form. An HTML-defined way to specify text boxes and pull-down menus to 
enable users of a Web page to enter data. The data from the form must be 
processed on the Web server by a program such as a CGI script. 

freeware. Software that can be used for free, though often with a license that 
contains some restrictions on its use. See also shareware. 



Graphic Interchange Format (GIF). Can be pronounced "jiff" or (our prefer- 
ence) "giff." A format for encoding less complex images, such as computer- 
generated graphics, for transfer among machines. GIF format is the most 
popular means for storing images for transfer over the Internet and is sup- 
ported by all graphical Web browsers. An image stored in GIF format is often 
referred to as "a GIF." See also JPEG, transparent GIF. 

Graphical User Interface (GUI). Software that enables users to interact with 
a computer by using a mouse and keyboard to manipulate images and menus 
on the computer's screen. The Windows and Macintosh user interfaces are 
both examples of GUIs. 

hexadecimal. What the witch did to her accountant so that her tax bill would 
be more favorable. More commonly, a way of counting that uses 16 "digits," 0 
through 9 plus A through F, instead of the 10 digits that common decimal 
numbering uses. Hexadecimal numbers are often used to describe values 
stored inside a computer, such as colors used in Web pages. 

In hexadecimal numbering, 0 through 9 have their normal values, but A repre- 
sents 10, B represents 11, and so on through F, which represents 15. Place 
values are also different; each successive place represents the next greater 
power of 16. For example, 2F in hexadecimal translates to 47 in decimal; the 2 
represents two 16s, and the F represents fifteen Is. 
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hit. This is what you hope your Web site will become. Also, a successful con- 
nection, file transfer, and disconnection between a Web client and a Web 

ccessing a single, text-only page generates one hit; accessing a single 
three graphics on it generates four hits. Hits can be counted fairly 
easily and are a crude measure of the popularity of a Web site. When you see 
a site that advertises "a million hits a week," remember that the number of 
hits may be many times greater than the number of different people who vis- 
ited. See also Web client and Web server. 



home page. A Web page that you intend users to come to directly If a Web 
site has multiple pages, the home page usually serves as the front door to the 
rest of your site, and the guide to all the other pages housed there. 

HTML 4.01. Currently the most broadly used version of Hypertext Markup 
Language, invented by Tim Berners-Lee (now, not coincidentally, Sir Tim 
Berners-Lee) in the late 1980's. All browsers available today support this ver- 
sion of HTML, though different browsers may interpret some tags differently 

Hypertext Markup Language (HTML). The language used to annotate, or 
"mark up" text documents so that they can be formatted appropriately and 
linked to other documents for use on the World Wide Web. See tag. 

Hypertext Transfer Protocol (HTTP). The agreed-upon format for exchang- 
ing messages among World Wide Web servers and between Web servers and 
clients, such as a Web browser. 



image map. See clickable image map. 



Integrated Services Digital Network (ISDN). Sometimes jokingly spelled out 
as "It Still Does Nothing." A special type of phone line available to many busi- 
nesses and homes. ISDN is a broadband connection option that supports 
faster transmission of data than standard phone lines. 

Internet. The hardware and software that together support the interconnection 
of most existing computer networks, allowing a computer anywhere in the 
world to communicate with any other computer that's also connected to the 
Internet. The Internet supports a variety of services, including the World Wide 
Web. 



Internet Protocol (IP). The networking specification that underlies the Internet. 
IP's most important feature is its support for routing of the packets — small 
chunks of information that make up a communication — across multiple con- 
nections to the final destination. 
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Internet service provider (ISP). An Internet service provider offers connec- 
tions to the Internet and support for Internet services such as the World 

;b. An ISP may also provide Web site storage space and related ser- 
pustomers. 

intranet. An internal network used for distributing information broadly 
within an organization, but not to the general public. Many intranets work 
just like the Internet and World Wide Web, only on a smaller scale. 

Java. A programming language that supports the creation of distributed pro- 
grams, called applets, whose functionality can be easily and flexibly split 
between a client computer and the server that it's connected to. Java pro- 
vides a way for the Web to support easy sharing of programs and data. Java 
has become less widely used within Web pages, but it is widely used on Web 
servers and corporate networks. 

JavaScript. Largely unrelated to Java (except through their common parent, 
C), JavaScript is often used to add interaction or some dynamic quality to a 
page (a calculator, a menu) through lines of text commands placed in the 
document or in a separate, linked file. 

Joint Photographic Experts Group (JPEG). A format for storing compressed 
images. JPEG images were once supported by helper applications but are 
now directly supported by nearly all browsers. JPEG is the best format for 
most photographs. See GIF. 

link. A connection between two documents on the Web, usually specified by 
an anchor in an HTML document. 

mirroring. Keeping a copy of data on additional servers to make data avail- 
able more quickly and to a greater number of simultaneous users. 

multimedia. Literally means "many media," and in this sense, a Web page 
with graphics is multimedia. However, multimedia is usually understood to 
mean either more than two types of media or, alternatively, time-based media 
such as animation, sound, or video and space-based media such as 3-D and 
virtual reality. On the Web, multimedia is also used to mean any extension of 
the Web beyond the basics of text, hyperlinks, GIF graphics, and JPEG graph- 
ics. Multimedia is beyond the basics, so it usually requires a special plug-in 
or player to support it. 

newsgroup. An ongoing exchange of electronic messages about a specific 
topic, such as pets, restaurants, or Web authoring. To access newsgroups, 
users must use special software called news reader software, which is avail- 
able on the Web and also included as a feature of current browsers. 
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numbered list. See ordered list. 



Traditiona 



rvice. Also referred to as a "traditional" or "proprietary" online service 
tiate from the Internet, which is seen as an "open" online service. 
Traditional online services, such as America Online and CompuServe, package 
access and content into a single branded product. The Internet and the Web 
have eroded the boundaries between online services by allowing cross-service 
functionality, such as e-mail between subscribers of different online services. 
The online service providers are further eroding these boundaries by offering 
Internet access, Web access, and Web authoring support. 

ordered list. A numbered list. A type of HTML list in which each item is given a 
number, in sequence, when the list displays. The author of the list can rearrange 
the items as needed, and the numbers adjust accordingly because the numbers 
are assigned only when the list appears onscreen. See unordered list. 

page description language. A defined format for specifying the appearance 
of a document when displayed or printed. Adobe's PostScript, used by many 
programs and in many laser printers, is a page description language, not a 
structural markup language such as HTML or SGML. 

pathname. A description of the location of a file. Pathnames can be specified 
by absolute addressing or relative addressing. 

plug-in. A small program that works with a Web browser to allow multimedia 
files to be displayed in a Web page, or that otherwise extends the capabilities 
of the browser. 

protocol. A format for exchanging data, such as FTP. 

QuickTime. A multiplatform standard from Apple Computer, Inc., for multi- 
media. See also multimedia, QuickTime plug-in, and QuickTime VR. 

QuickTime plug-in. A plug-in for Firefox and Microsoft Internet Explorer that 
supports user interaction with QuickTime and QuickTime VR content embed- 
ded in a Web page. See also QuickTime and QuickTime VR. 

QuickTime VR. A multiplatform standard for image-based virtual reality. See 
also QuickTime and QuickTime plug-in. 

relative address. The path from a base document, such as an HTML docu- 
ment, to another document on the same computer, such as another Web page 
on the same site. See also pathname and absolute address. 
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shareware. Software that can be used for free for a limited period of time, 
after which the user is requested (though usually not forced) to pay a fee for 
d use. See freeware. 



shrink-wrapped software. No, this is not software developed and packaged 
by psychiatrists. Actually, shrink-wrapped software is just software that is 
sold as a product and packaged in a box, with the user paying upfront before 
taking possession of the software. See also freeware and shareware. 



site management. Capabilities in a Web authoring package that help authors 
work on characteristics of an entire Web site, instead of just one page at a 
time. Site-management capabilities include the ability to easily manage links 
between Web pages (such as offering notification when links are no longer 
functional), the capacity to spell-check, built-in ability to upload Web pages 
to a server, and the ability to easily search and replace across an entire site. 

standard. An agreed-upon way to do something, such as building a computer 
system (for example, the IBM-compatible standard) or exchanging data (for 
example, the ASCII standard). Many different standards exist, ranging from 
those created by a single manufacturer for its own purposes (the DOS stan- 
dard) to those created by internationally recognized standards bodies such 
as ISO (the International Standards Organization). In other words, in comput- 
ing, the definition of standard is not very standard. 

Standard Generalized Markup Language (SGML). A full-featured specifica- 
tion for describing the content and structure of documents but not their 
exact appearance when displayed. HTML is a subset of SGML. 

syntax. A fee paid for moral or legal violations — no, wait, that's a "sin tax." A 
syntax is the ordering of the elements in a language or protocol, such as 
HTML. 



system operator (sysop). Pronounced "siss-op." A person responsible for 
some part of the operations of a computer system, including online services. 
A sysop's responsibilities can vary from the technical, such as backing up a 
computer hard drive, to the nontechnical, such as monitoring a newsgroup 
for inappropriate or irrelevant content and removing it if found. 

tag. Part of an HTML document that contains information besides the actual 
document content, such as formatting information or an anchor. For example, 
the <B> tag starts holding the characters that follow it, and the </B> tag 
ends holding. So to make a word or phrase bold, surround it with the <B> 
and </B> tags. 
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text editor. A program that allows text to be entered and edited but not for- 
matted for display. Text editors save their files without proprietary format- 
mation, so the files are portable across different application 
and different computer systems. Examples are Notepad (Windows), 
BBEdif(Macintosh), and vi (UNIX). 



thumbnail. A small graphical image that serves as a preview of a larger 
image. 

Transmission Control Protocol/Internet Protocol (TCP/IP). A communica- 
tions protocol that was developed under contract from the U.S. Department of 
Defense in the 1970s to connect different systems and different networks. 
TCP/IP is the protocol on which the Internet is based. 

transparent GIF. A file stored in Graphic Interchange Format and modified 
so that one color — usually, the color of the area around the objects of 
interest — is assigned transparency. This capability makes the rectangular 
frame around the objects seem to disappear so that the graphic appears to 
float over the page on which it appears. 

Uniform Resource Locator (URL). A specification for identifying any file on 
the Internet. The URL is made up of the name of the protocol by which the 
file should be accessed, the name of the server that the file is stored on, and 
the pathname of the file on the server. Here is a sample URL for an HTML file 
named MyCruise, to be accessed by using the Web protocol http, which is 
stored on a server called www . bigweb . com in the Travel directory: 

http : / /www. bigweb . com/ Travel /MyCruise . html 

If no filename is given at the end of the path, a default file, typically 
index . htm or index . html, is returned. 

unordered list. A bulleted list. A type of HTML list in which each item is dis- 
played next to a symbol such as a bullet. 

Web authoring. Creating documents for use on the World Wide Web. Web 
authoring includes creating text documents with HTML tags, as well as creat- 
ing or obtaining suitable graphics and, in many cases, multimedia files. 



Web browser. See browser. 



Web client. A computer that connects to the World Wide Web and downloads 
Web pages and other data from it. 

Web page. A text document that uses HTML tags to specify formatting and 
links from the document to other documents and to graphics and multimedia 
files. 
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Web publishing. The entire process of creating and maintaining a Web site, 
from creating text documents with HTML tags and graphics, to putting the 



Web server. A computer that connects to the World Wide Web and hosts 
HTML-tagged text documents, graphics, and multimedia files to be down- 
loaded by Web clients. 

Web site. One or more linked Web pages accessed through a home page. The 
URL of the home page is made available to users on other Web sites, and 
often through other advertising and marketing means as well. 

word processor. A program for creating and editing text files with formatting. 
Files created by a word processor contain formatting codes and cannot be 
used on the Web unless specifically saved in text-only or plain-text format, 
without the proprietary codes that word processors embed in the file to indi- 
cate formatting. 

World Wide Web (also known as the Web). An Internet service that provides 
files from servers linked by Hypertext Transfer Protocol (HTTP). The Web 
specification allows formatted text and graphics to be viewed directly by a 
Web browser and allows other kinds of files to be opened separately by 
helper applications specified in the Web browser's setup. After e-mail, the 
Web is the most popular Internet service, partly because it can also be used 
to access other Internet services, such as newsgroups and FTP. 




Is on a server, to revising the documents over time. 
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■ Mneol the best resources on the Web is The Bare Bones Guide to HTML. At 

this writing, this excellent reference lists nearly all the tags in the most 
widely supported version of HTML, Version 4.0, plus Netscape extensions. 

This site was developed and is maintained by Kevin Werbach, a Harvard Law 
School graduate and former FCC attorney in Washington who has invested a 
lot of time and thought into Web authoring. You can find out an awful lot 
about Web authoring from the thoughts, resources, and examples on Kevin's 
home page at www . werbach . com. 

The Bare Bones Guide lists tags from the different versions of HTML with 
notes describing which version of HTML a given tag supports. We thought 
splitting out the HTML tags into separate tables by the version of HTML they 
support would help you. 

In the version of The Bare Bones Guide in this book, we include only HTML tags 
from HTML versions through Version 4.0. For frames only, we use HTML 4.0 
tags; see Table B-26 at the end of this chapter. We do this because HTML 4.0 
tags are the most commonly used by the broad range of Web pages and Web 
browsers out there. The online version of The Bare Bones Guide to HTML lists 
tags up to the current version of the HTML standard at the time that you 
access the site. 

The original The Bare Bones Guide to HTML, from which we adapted this ver- 
sion, is copyrighted (©1995-2006) to Kevin Werbach. You can reproduce the 
original, as long as you include this statement: 

Copyright ©1995-2006 Kevin Werbach. Distribution is permitted, as long as 
there is no charge and this document is included without alteration in its 
entirety. This Guide is not a product of Bare Bones Software. More 
information is available at http : //werbach . com/bar ebones. 

For more on HTML, you may also want to visit the World Wide Web consor- 
tium, the organization with the most responsibility for Web standards. A good 
starting point is the HTML4 area at www.w3 . org/TR/html4/. 

Note: The Bare Bones Guide to HTML is not affiliated with Bare Bones 
Software, makers of the BBEdit text editor for the Macintosh (www. 
barebones . com). 
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RrrM-xD^ri Twenty-two world languages 
UlOpDOOrxS in The Bare Bones Guide 



Online, you find versions of The Bare Bones 
Guide in English in plain text, formatted text, and 
table versions, as well as translations into 21 
additional languages: Chinese (two versions), 
Danish, Dutch, Estonian, Finnish, French, 



German, Hebrew, Icelandic, Indonesian, Italian, 
Japanese, Korean, Norwegian, Portuguese, 
Romanian, Russian (three versions), Slovenian, 
Spanish, Swedish, and Turkish. 



Versions of HTML 

The tags in this table are part of the HTML 4.0 standard and are supported by 
all up-to-date browsers. So if you aren't worried about ancient history — in 
Web terms, that's anything that happened more than a year ago — and aren't 
worried about the stubborn few users of your Web pages who may still have 
old browsers, you can ignore this section and go straight to the tables. But if 
you really want to know the details, read on. 

The versions of HTML we describe in this appendix are 

v* HTML 2.0: All browsers available today support this basic version of 
HTML. However, some tags are interpreted differently by different 
browsers. For example, a top-level heading, marked by an <Hl> tag, may 
be formatted somewhat differently in different browsers. 

V Netscape Navigator 1.0, 1.1: These early versions of Netscape Navigator 
fueled the first huge surge in the growth of the Web. These were the first 
browsers to provide support for centered text, floating graphics, and 
colored text and backgrounds by using new "extensions" to HTML 2.0. 
Other browsers and HTML 3.2 have adopted many of the features and 
new tags introduced by Netscape in Netscape Navigator 1.0 and 1.1. 

HTML 3.2: This is a widely supported version of the HTML standard. 
Many of the ideas originally included in the HTML 3.0 proposal, such as 
tables and paragraph alignment, were first supported by Netscape 
Navigator 1.0 and 1.1. 

Netscape Navigator 2.0: This years-old used version of Netscape 
Navigator implements a few minor features, plus a major one: frames, 
which are specific areas within the browser window that contain differ- 
ent content and can be updated separately. 
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i>* HTML 4.0 and later browser versions: HTML 4.0 is the latest standard- 
ized version of HTML. It includes some features that were introduced by 
osoft and Netscape in their own browsers. However, HTML 4.0 
des some complex features that are not consistently implemented 
in current browser versions. 




Over time, browsers are updated and improved to support a wider range of 
tags. However, some users still have the old version of their browser. So don't 
assume that just because a new version of a browser supports specific tags, 
all users of that browser will upgrade and gain the ability to view those tags 
correctly. 



Hou) to Use This Appendix 

To use this appendix when creating your own pages, start with the first table, 
a basic list of HTML 2.0 - and HTML 3.2-compliant tags that work with almost 
any browser. If you use only the tags in this list, your pages will be as widely 
usable as possible. Then you can selectively spice up your pages by using 
tags from the different sets of HTML extensions listed in the later tables. You 
can also use this list to create separate versions of your pages: one version 
for all browsers and another for browsers that support the specific exten- 
sions that you use. 

This appendix includes HTML tags that we did not discuss in the text of this 
book. To find out more about a specific tag, experiment with it in your Web 
text and your browser. If you need more information than you can get by 
experimenting, buy a more advanced book on HTML, such as HTML 4 For 
Dummies, 5th Edition, by Ed Tittel and others (Wiley). 



Reading the Tables 

Within the tables you may see some tags that are not preceded by a dash, fol- 
lowed by tags preceded by a dash, such as 

Tag Name Tag Notes 

Preformatted <pre></pre> Display text spacing as-is 

-Width <pre width=?></pre> Width in characters 

The tags with descriptions that start with a dash are actually options within 
other tags. These optional tags modify the effect of the tag that they appear 
with. You will always see the option listed with the tag that it modifies, so 
that you can see how to use it in your own HTML-tagged text. 
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The use of the dash symbol to indicate optional tags and other symbols in 
the tables are described in Table B-l. 



d Books 

that these 



rder to align columns correctly, some tags are broken. At the points 
that these tags break, we placed a downward, left-curving arrow (^D) to indi- 
cate the break. 



Table B-1 


Symbols Used in the Tables 




Symbol 


Meaning 




URL 


URL of an external file (or just filename if in the same directory) 


? 


Arbitrary number (for example, <H?> means <Hl> 
<H3>, and so on) 


, <H2>, 


% Arbitrary percentage (for example, <hr widths 
<hr width=50%>, and so on) 


>> means 


*** 


Arbitrary text (for example, alt= " * * * " means fill 
text) 


in with 


$$$$$$ Arbitrary hexadecimal number* (for example, BGCOLOR= 
"#$$$$$$" means BGCOLOR="#00FFlC", and so on) 



I 


Alternatives (for example, align=left right 
means pickone of these) 


CENTER 













-Option An option within a tag 



*Foran explanation of hexadecimal numbering, see Appendix A. 



Widely Supported laq$ 

The tags in Table B-2 through Table B-10 are in all versions of HTML since 2.0 
(in some cases) or 3.2 (in others) and should work in all browsers. 



Table B-2 


Generally All HTML Documents Should Have These Tags 


Tag Name 


Tag 


Notes 


Document Typ 


e < HTML ></ HTML > 


Beginning and end of file 


Title 


<TITLE>< /TITLE> 


Must be in header 


Header 


<HEADX/HEAD> 


Descriptive info, such as title 


Body 


<BODY></BODY> 


Bulk of the page 
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Table B-3 Structural Definition: Appearance Controlled 

by the Browser's Preferences 



Heading 



Block Quote 



Emphasis 



Strong Emphasis 



Tag 



Notes 



<H?x/H?> 



The HTML 2.0 specification 
defines six levels 



<BLOCKQUOTE> 
</BLOCKQUOTE> 



Usually indented 



<EMx/EM> 



Usually displayed as italic 



<STRONG></STRONG> Usually displayed as bold 



Citation 


<CITEx/CITE> 


Usually italics 




Code 


<CODEx/CODE> 


For source code 


! listings 


Sample Output 


<SAMPx/SAMP> 






Keyboard Input 


<KBDx/KBD> 






Variable 


<VARx/VAR> 






Author's Address 


<ADDRESS>< /ADDRESS> 







Table B-4 Presentation Formatting: Author Specifies 

Text Appearance 



Tag Name 


Tag 


Notes 


Bold 


<Bx/B> 




Italic 


<IX/I> 




Typewriter 


<TTx/TT> 


Displayed in a monospaced 


font 


Preformatted 


<PREX/PRE> 


Displays text spacing as-is 


-Width 


<PRE WIDTH=?>P 
/PRE> 


Width in characters 
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Table B-5 


Links and Graphics 




Tag 


Notes 


Link <A HREF="URL"x/A> 


Link to Target 


<A HREF= " URL# * * * "></ A> 


If in another document 




<A HREF= "#***" >< / A> 


If in current document 


Define Target 


<A NAME="***"x/A> 




Display Image 


<IMG SRC="URL"> 




- Alignment 


<IMG SRC="URL" ALIGN ^ 


HTML 3.2 and 




=TOP BOTTOM | MIDDLE ~P 


beyond only 




RIGHT LEFT> 




- Alternate 


<IMG SRC="URL" ALT="***"> 





-Imagemap <img SRC="URL" ismap> Requires a script 



Table B-6 Dividers 



Tag Name 


Tag 




Notes 




Paragraph 


<p> 




See Table B-14 for more 
info 


Line Break 


<BR> 




A single carri 


age return 











Horizontal Rule <hr> HTML 3.2 only 



Table B-7 Lists: Can Be Nested 



Tag Name 


Tag 


Notes 


Unordered List 


<UL><LIx/UL> 


<li> before each list 
item 


Ordered List 


<OLxLIx/OL> 


<li> before each list 
item 


Definition List 


<DLxDTxDDx/DL> 


<dt> =term, <dd> = 
definition 
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DropBoo^ , 

Special Character 



Table B-8 Special Characters: Must All Be Lowercase 



Tag 



Notes 



&#?; 



Where? is the ISO 
8859-1 code for the 
character 



< 



> 



&amp ; 



&quot ; 




Registered TM ® 




Copyright © 




See a complete list of special characters at www.bbsinc . com/ symbol .html. 


Table B-9 Forms: Generally Require a Script on Your Server 


Tag Name Tag 




Notes 




Define Form <FORM 
"URL " 
POST> 


ACTION= ~P 

method=get| ~P 

</FORM> 




Input Field <input type= m text 

PASSWORD | CHECKBOX 





RADIO | IMAGE | HIDDEN | ^ 
SUBMIT I RESET "> 



Field Name 



< INPUT NAME= 



Field Value 



<INPUT VALUE= "***"> 



Checked? 



< INPUT CHECKED> 



Check boxes and radio 
buttons 



Field Size 



<INPUT SIZE=?> 



In characters 



Max Length 



< input maxlength=?> In characters 



Selection List 



<SELECTx/SELECT> 



(continued) 
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Table B-9 (continued) 




Tag 


Notes 




- Name of List 


< SELECT NAME= "***"> ^) 
</SELECT> 






-# of Options 


<SELECT SIZE=?> 
</SELECT> 






- Multiple Choice 


<SELECT MULTTPLE> 


Can select more than 
one 


Option 


<OPTION> 


Items that can be 
selected 


- Default Option 


<OPTION SELECTED> 






Input Box Size 


<TEXTAREA ROWS=? COLS=?>^3 
</TEXTAREA> 







-Name of Box <textarea name=" *** ">ccc7) 

</TEXTAREA> 



Table B-10 


Miscellaneous 






Tag Name 


Tag 


Notes 




Comment 


<- | * -k * > 


Not displayed by the 
browser 


Prologue 


< ! DOCTYPE HTML 73 
PUBLIC " -//IETF//P 
DTD HTML 2 . 0//EN"> 






URL of This File 


<BASE HREF= " URL " > 


Must be in header 


Relationship 


<LINK REV="***"^D 

REL= "***" HREF= "URL " > 


In header 




Meta Information 


<META> 


Must be in header 



Other Widely Used Taqs 

The tags in Table B-l 1 through Table B-17 work with nearly all the browsers 
currently in use. For a frequently updated list of widely used tags, see The 
Bare Bones Guide to HTML at the URL listed at the beginning of this chapter. 
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Table B-11 


Structural Definition: Appearance Controlled 
by the Browser's Preferences 




Tag 


Notes 


- Align Heading 


<H? ALIGN=LEFT 75 
CENTER RIGHTx/H?> 


HTML 3.2 Option 
within the HTML 2.0- 
compliant Heading tag 


Division 


<DIVx/DIV> 


HTML 3.2 




- Align Division <DIV ALIGN=LEFT \~P 
RIGHT CENTER | ~P 
JUSTIFYx/DIV> 


HTML 3.2 


Large Font Size 


<BIG></BIG> 


HTML 3.2 



Small Font Size 



< SMALLx / SMALL> 



HTML 3.2 



Table B-12 Presentation Formatting: Author Specifies 

Text Appearance 



Tag Name 



Tag 



Notes 



Subscript 



<SUBx/SUB> 



HTML 2.0 



Superscript 



<SUPx/SUP> 



HTML 2.0 



Center 



<CENTERx/CENTER> 



Netscape 1.0. widely 
implemented; for both 
text and images 



Table B-13 Links and Graphics 



Tag Name 


Tag 




Notes 


Dimensions 


<IMG SRC=' 


'URL "~P 


HTML 3.2. Image width 




WIDTH= " ? 1 


' HEIGHT=^D 


and height in pixels 




" ? " > 
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Table B-14 


Dividers 






Tag 


Notes 


Paragraph 


<Px/P> 


HTML 3.2. Paragraph tag, 
<p>, redefined as a 
containertag, </p> is 
optional 


- Align Text 


<P ALIGN=LEFT | 7) 


HTML 3.2 


CENTER | RIGHT 
JUSTIFYx/P> 



- No Line Breaks <p nowrap></p> Internet Explorer only 



Table B-15 



Backgrounds and Colors 



Tag Name 



Tag 



Notes 



Tiled Background 



<BODY BACKGROUND^ 
" URL " > 



HTML 3.2 



Background Color 



<BODY BGCOLOR=75 
"#$$$$$$"> 



HTML 3.2. Color order, 
red/green/blue 



Text Color 



<BODY TEXT=^D 
"#$$$$$$"> 



HTML 3.2. Color order, 
red/green/blue 



Link Color 



<BODY LINK=^3 
"#$$$$$$"> 



HTML 3.2. Color order, 
red/green/blue 



Active Link 



<BODY ALINK=7D 
"#$$$$$$"> 



HTML 3.2. Color order, 
red/green/blue 



Visited Link 



<BODY VLINK=^D 
"#$$$$$$"> 



HTML 3.2. Color order, 
red/green/blue 



You can find more info at www. werbach . com/web/wwwhelp . html. 



Table B-16 


Tables 




Tag Name 


Tag 


Notes 


Define Table 


<TABLE>< /TABLE> 


HTML 3.2 


- Table Border 


<TABLE BORDER>7) 


HTML 3.2. Either on or off 




</ TABLE > 
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Tag Name Tag 

Border <table border=?>^D 

</ TABLE > 



Notes 

HTML 3.2. Can set the 
border width in pixels 



Cell Spacing 



<TABLE CELLSPACING=?> 



HTML 3.2 



Cell Padding 



<TABLE CELLPADDING=?> 



HTML 3.2 



Desired Width 



<TABLE WIDTH=?> 



HTML 3.2. In pixels 



■Width Percent 



<TABLE WIDTH=%> 



HTML 3.2 Percentage of 
page 



Table Row 



<TRx/TR> 



HTML 3.2 



-Alignment <TR ALIGN=LEFT| RIGHT |P HTML 3.2 

CENTER JUSTIFY 
VALIGN=TOP | P 
MIDDLE | BOTTOM> 




Table Cell <td></td> 


HTML 3.2. Must appear 
within table rows 


-Alignment <td align=left \~P HTML 3.2 

RIGHT | CENTERED 
VALIGN=TOP | MIDDLE ~P 
BOTTOM> 




- No Line Breaks <td nowrap> 


HTML 3.2 




- Columns to Span <td colspan=?> 


HTML 3.2 




-RowstoSpan <td rowspan=?> 


HTML 3.2 





Desired Width 



<TD WIDTH=?> 



HTML 3.2. In pixels 



■Width Percent 



<TD WIDTH= 



HTML 3.2 

Percentage of table 



Desired Height 



<TD HEIGHT=?> 



HTML 3.2. In pixels 



Height Percent <td height=%> 



HTML 3.2 

Percentage of page 



Table Header 



<THx/TH> 



HTML 3.2. Same as data, 
except bold centered 



(continued) 
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Table B-16 (continued) 

um Mame 7ag Notes 

-Alignment <th align=left | right | HTML 3.2 

CENTER | JUSTIFY j CHAR . 
VALIGN=TOP | ~P 
MIDDLE | BOTTOM> 

- No Line Breaks <th nowrap> HTML 3.2 

- Columns to Span <th COLSPAN=?> HTML 3.2 



-Rows to Span <th rowspan=?> HTML 3.2 



- Desired Width 


<TH WIDTH= 


?> 




HTML 3.2. In pixels 


-Width Percent 


<TH WIDTH= 


%> 




HTML 3.2. Percentage of 
table 


- Desired Height 


<TH HEIGHT=?> 


HTML 3.2. In pi 


xels 


- Height Percent 


<TH HEIGHT=%> 


HTML 3.2. Percentage of 
page 


Table Caption 


<CAPTION>< /CAPTION: 


HTML 3.2 
















- Alignment 


< CAPTION ALIGN=TOP 
BOTTOM> 


12 


HTML 3.2. 
Above/below table 












Table B-17 


Miscellaneous 




Tag Name 


Tag 






Notes 




Script 


<SCRIPTx/SCRIPT> 









-Location <script src="URL"> 

</SCRIPT> 



-Type <SCRIPT TYPE="***"> 

</SCRIPT> 

-Language <script language= 

"***"></SCRIPT> 



DropBo 



Java Applet <applet> 



HTML 3.2 
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Tag Name 



Tag 



Notes 



DropBooks 

- Altern 



t Name 



<APPLET NAME="***"> 



HTML 3.2 



ternate Text 



<APPLET ALT= ' 



HTML 3.2 



- Applet Code 
Location 



<APPLET CODE="URL"> 



HTML 3.2 



- Code Base 
Directory 



<APPLET CODEBASE; 
URL " > 



HTML 3.2 



■Applet Window <applet height=?> 



HTML 3.2. In pixels 
Height 



■Width 



<APPLET WIDTH=?> 



HTML 3.2. In pixels 



Horizontal Offset <applet hspace=?> 



HTML 3.2. In pixels 



■Vertical Offset 



<APPLET VSPACE=?> 



HTML 3.2. In pixels 



- Alignment 


<applet73 

ALIGN= [ left | ~^ 
right | top | 
middle | bottom] > 


HTML 3.2 




Applet Parameter 


<PARAM> 




HTML 3.2 




- Parameter Name, 
Value 


<PARAM NAME=" apple- 
name " , VALUE = " 75 
parameter value "> 


t^) HTML 3.2 




3.2 Prologue 


< ! DOCTYPE 




HTML^D 


HTML 3.2 





PUBLIC"- //W3C//DTTQ 
HTML 3 . 2 FINAL/ /EN" > 



Less Frequently Used Tags 

Some Netscape Navigator-only tags were slow to be adopted by non-Netscape 
browsers. However, most of the tags in Table B-18 through Table B-26 can be 
used with up-to-date browsers. HTML 4.0-specific tags are only supported by 
relatively recent browsers. 
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Table B-18 Structural Definition: Appearance Controlled 

by the Browser's Preferences 





Tag 


Notes 




Defined Content 


<SPAN></SPAN> 


HTML 4.0 




Quote 


<Q></Q> 


HTML 4.0. For short 
quotations 










- Citation 


<Q CITE="URL"x/Q> HTML4.0 




Insert 


<INSx/INS> 


HTML 4.0. Marks addi- 
tions in a new version 


- Time of Change 


<INS DATETIME= " 
</INS> 


:::"> HTML 4.0 




- Comments 


<INS CITE="URL" 
</INS> 


> HTML 4.0 




Delete 


<DELx/DEL> 


HTML 4.0. Marks dele- 
tions in a new version 


- Time of Change 


<DEL DATETIME= " 
</DEL> 


:::"> HTML 4.0 




- Comments 


<DEL CITE="URL" 
</DEL> 


> HTML 4.0 





Acronym 



<ACRONYMx /ACRONYM> 



HTML 4.0 



Abbreviation 



<ABBRx/ABBR> 



HTML 4.0 



Table B-19 Presentation Formatting: Author Specifies 

Text Appearance 



Tag Name 


Tag 


Notes 


Blinking 


<BLINKx/BLINK> 


Navigator 1.0. Most 
derided tag ever 


Font Size 


<FONT SIZE=?>75 
</FONT> 


HTML 3.2. Ranges from 
1 -7 


Change Font Size 


<FONT SIZE=+ | -?>7) 
</FONT> 


HTML 3.2 


Base Font Size 


<BASEFONT SIZE=?> 


HTML 3.2. From 1-7; 
default is 3 
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Tag Name 



DropBo oks 10 



Underline 



Strikeout 



Select Font 



Tag Notes 

<FONT COLOR=^D HTML 3.2 

"#$$$$$$"> </FONT> 



<U></U> 



<S></S> 



<FONT FACE="***"> 
</FONT> 



HTML 2.0 



HTML 2.0 



HTML 4.0 



Table B-20 



■ Alignment 



Links, Graphics, and Sounds 



Tag Name 


Tag 






Notes 




- Target Window 


<A HREF 
TARGET= 


= "URL"^> HTML 4.0 

" *** "></A> 




Action on Click 


<A HREF 
ONCLICK 


= "URL"^D HTML 4.0 

="***">< /a> 




Mouseover Action 


<A HREF= "URL "75 
ONMOUSEOVER= " * * * 

</A> 


HTML 4.0 

■ " > 




Mouseover Action 


<A HREF="URL"75 
ONMOUSEOUT= " * * * " 

</A> 


HTML 4.0 

> 





<IMG SRC="URL"7D 
ALIGN= LEFT | RIGHT | 
TEXTTOP | ABSMIDDLE | 
BASELINE I ABSBOTTOM> 



Navigator 1.0. Option 
within the HTML 2.0- 
compliant Display 
Image tag 



Image Map 



<IMG SRC="URL"7) 
USEMAP="URL "> 



HTML 3.2. Option 
within the HTML 2.0- 
compliant Display 
Image tag 



Map 



<MAP NAME="***">7D 

</MAP> 



HTML 3.2. Describes 
the map. Option within 
the HTML 2.0- 
compliant Display 
Image tag 



(continued) 
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Table B-20 (continued) 



DropBooIfi 

- Sectic 



me Tag Notes 



ion <area shape= " rect " HTML 3.2. Option within 

COORDS= "#,#,#," href=7D the HTML 2.0 - compliant 

" URL " | nohref> Display Image tag 

-Border <img SRC="URL"75 HTML3.2 

BORDER=?> 

Runaround Space <img SRC="URL"75 HTML 3.2. In pixels 

HSPACE= ? VSPACE=?> 

Low-Res Proxy <IMG SRC="URL"73 
LOWSRC= "URL"> 

N1.1 Client Pull <meta http-equiv=^D HTML 2.0 
"Refresh" CONTENT= 
"?; URL=URL"> 

Embed Object <embed SRC="URL"> Navigator 2.0. Insert object 

into page 

-ObjectSize <embed SRC="URL"^D Navigator 2.0, Internet 



1 


fllDTH ="? 
" ? " > 




height=^D Explorer 




Object 


<OBJECT>< 


/ 


OBJECT> 


Navigator 4.0 





Parameters <param> Navigator 4.0 



Table B-21 Dividers 



Tag Name 


Tag 




Notes 


- Clear Text Wrap 


<BR CLEAR=LEFT | 
RIGHT ALL> 




HTML 3.2. Option within 
the HTML 2.0 -compliant 
Line Break tag 


- Alignment 


<HR ALIGN=LEFT 
RIGHT | CENTER> 


I 3 


HTML 3.2. Option within 
the HTML 2.0 -compliant 
Horizontal Rule tag 


- Thickness 


<HR SIZE=?> 




HTML 3.2. In pixels. Option 
within the HTML 2.0- 
compliant Horizontal Rule 
tag 
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Tag Name 


Tag 


Notes 






<HR WIDTH=?%> 


HTML 3.2. In pixels. Option 
within the HTML 2.0- 
compliant Horizontal Rule 
tag 


-Width Percent 


<HR WIDTH=?%> 


HTML 3.2. As a percentage 
of page width. Option 

w/ithin thp HTMI 9 0- 


compliant Horizontal Rule 
tag 


- Solid Line 


<HR NOSHADE> 


HTML3.2. Without the 3-D 
cutout look. Option within 
the HTML 2.0 -compliant 
Horizontal Rule tag 


No Break 


<NOBRx/NOBR> 


Navigator 1.0. Prevents 
line breaks 


Word Break 


<WBR> 


Navigator 1.0. Where to 



break a line if needed 



Table B-22 Lists: Can Be Nested 



Tag Name 


Tag 


Notes 




- Bullet Type 


<UL TYPE=DISC 
CIRCLE SQUARE > 


HTML 3.2. For the whole 
list. Option within the 
HTML 2.0 -compliant 
Unordered List tag 



<LI type=disc|^} HTML 3.2. This and subse- 

CIRCLE | square > quent list items. Option 

within the HTML 2.0- 
compliant Unordered List 
tag 



- Numbering Type <ol type=a a I i 1> 


HTML 3.2. This and subse- 
quent list items. Option 
within the HTML 2.0- 
compliant Ordered List tag 


<LI TYPE=A | a I i 1> 


HTML 3.2. This and subse- 




quent list items. Option 




within the HTML 2.0- 




compliant Ordered List tag 



(continued) 
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Table B-22 (continued) 


\ urg&me Tag 


Notes 


- Starting Number <OL start=?> 


HTML 3.2 


-Count <OL VALUE=?> 


HTML 3.2 For the whole 




list. Option within the 




HTML 2.0 -compliant 




Ordered List tag 



Table B-23 Forms: Generally Require a CGI Script on Your Server 



Tag Name Tag 




Notes 




- File Upload 

< 


cFORM ENCTYPE=P 
"multi part/form-^ 
lata"x/FORM> 


HTML 4.0 

) 




- Wrap Text 


CTEXTAREA WRAP=OFF 
/IRTUAL PHYSICAL^ 
c/TEXTAREA> 


|P HTML 2.0 
) 




Button 


cBUTTONx/ 


BUTTON> 


HTML 4.0 




- Button Name 


c BUTTON NAME= " * * * * 
c/BUTTON> 


»>P HTML 4.0 




- Button Type < buttokQ 


HTML 4.0 





TYPE= " SUBMIT | P 
RESET | BUTTON" >P 
</BUTTON> 



- Default Value 


< BUTTON VALUE =" **** ">P 
</BUTTON> 


HTML 4.0 




Label 


<LABELx/LABEL> 


HTML 4.0 


- Item Labeled 


< LABEL FOR="****">P 
</LABEL> 


HTML 4.0 


Option Group 


<OPTGROUP LABEL= "****"> 
</OPTGROUP> 


P HTML 4.0 


Group Elements 


<FIELDSET>< /FIELDSET> 


HTML 4.0 



Appendix B: A Quick Guide to HTML Tags ^07 



Tag Name 


Tag 


Notes 


)ks 


< LEGENDx / LEGEND> 


HTML 4.0. Caption 
forfieldsets 


- Alignment 


<LEGEND^D 
ALIGN= " TOP ~P 
BOTTOM LEFT 
RIGHT " >< /LEGEND> 


H 1 ML 4.U 














Table B-24 


Tables 




Tag Name 


Tag 


Notes 


-Table Alignment 


<TABLE ALIGN=LEFT ^) 
RIGHT CENTER> 


HTML 4.0 


-Table Color 


<TABLE BGCOLOR= "$$$$$$ ">^D 
</TABLE> 


HTML 4.0 


- Table Frame 


<TABLE FRAME=VOID ~P 
ABOVE BELOW | HSIDES ~P 
LHS | RHS | VSIDES BOX ~P 
BORDERx /TABLE> 


HTML 4.0 



-Table Rules <table rules=none | groups | HTML 4.0 

ROWS | COLS | ALL> 
</TABLE> 



- Desired Width 


<TD WIDTH=?> 


HTML 4.0. In pixels 


- Cell Color 


<TD BGCOLOR= 
"#$$$$$$"> 


HTML 4.0 


- Desired Width 


<TH WIDTH=?> 


HTML 4.0. In pixels 




-Cell Color 


<TH BGCOLOR= 
"#$$$$$$"> 


HTML 4.0 


Table Body 


<TBODY> 


HTML 4.0 


Table Footer 


<TFOOT>< / TFOOT> 


HTML 4.0. Must 
come before 

<THEAD> 
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Table B-24 (continued) 




Tag 


Notes 






<THEAD>< /THEAD> 


HTML 4.0 




Column 


<COLx/COL> 


HTML 4.0. Groups column 
attributes 


- Columns Spanned 


<COL SPAN=?x/COL> 


HTML 4.0 




- Column Width 


<COL WIDTH=?x/COL> 


HTML 4.0 




-Width Percent 


<COL WIDTH="%"x/COL> 


HTML 4.0 




Group columns 


<COLGROUP>< / COLGROUP> 


HTML 4.0. Groups column 
structure 


_ Pnhimn^ ^nannprl 

\j U 1 U 1 1 1 1 1 o uUQMI ICU 


SPAN=?>^> 

</COLGROUP> 


HTML 4.0 




- Group Width 


<COLGROUP 

WIDTH=?>^) 

</COLGROUP> 


HTML 4.0 




-Width Percent 


<COLGROUP 
WIDTH= " % " >~P 
</COLGROUP> 


HTML 4.0 









Table B-25 Frames: Define and Manipulate Specific 

Regions of the Screen 



Tag Name 


Tag 


Notes 


Frame Document 


<FRAMESET> 


HTML 4.0. Instead of 




</FRAMESET> 


<BODY> 


- Row Heights 


<FRAMESET ROWS=^ 
#,#,#,> </FRAMESET> 


HTML 4.0. Pixels or 
percent 


- Row Heights 


<FRAMESET ROWS=*>^3 
</FRAMESET> 


HTML 4.0. * = relative size 


- Column Widths 


<FRAMESET COLS=73 
#,#,#,> </FRAMESET> 


HTML 4.0. Pixels or 
percent 



Appendix B: A Quick Guide to HTML Tags 



Yag Nbhib 


Tao 


Notas 


) k.^" widths 


<FRAMESET COLS=*>^5 
</FRAMESET> 


HTML 4.0.* = relative 
size 


- Borders 


<FRAMESET FRAMEBORDER= 
"yes |no"^D 
</FRAMESET> 


HTML 4.0 


- Border Width 


<FRAMESET BORDER=?D 


HTML 4.0 


</FRAMESET> 


- Border Color 


<FRAMESET BORDERCOLOR= 

ii -k -k k k * k " ) 

</FRAMESET> 


HTML 4.0 



Define Frame 



<FRAME> 



HTML 4.0. Contents of 
an individual frame 



- Display Document 


<FRAME SRC="URL"> 


HTML 4.0 




- Frame Name 


<FRAME NAME="***" | 75 
_blank |_self|75 
_parent | _top> 


HTML 4.0 




- Margin Width 


< FRAME MARGINWIDTH=?> 


HTML 4.0. Lef 

margins 


t and right 


- Margin Height 


<FRAME MARGIN 
HEIGHT=?> 


HTML 4.0. Top and 
bottom margins 


- Scroll bar? 


< FRAME SCROLLING^ 
"YES NO|AUTO"> 


HTML 4.0 




- Not Resizable 


< FRAME NORESIZE> 


HTML 4.0 




Borders 


<FRAME 

FRAMEBORDER= 
"yes | no" > 


HTML 4.0 




Border Color 


< FRAME 

BORDERCOLOR= 
"#$$$$$$"> 


HTML 4.0 





(continued) 



Part VII: Appendixes 



DropBo 



Table B-25 (continued) 




Tag 


Notes 


InnneTrame 


< I FRAME >< / I FRAME > 


HTML 4.0. Takes same 
attributes as frame 


Dimensions 


< I FRAME WIDTH=? 
HEIGHT= ?>< / IFRAME> 


HTML 4.0 




Dimensions 


<±.bKAiXLK W1UTH= " ? " 
HEIGHT= " % " >< / I FRAME > 


M 1 IVIL t.U 


Unframed Content 


<NOFRAMESx/NOFRAMES> 


HTML 4.0 For non-frames 
browsers 



Note: Frame tags introduced prior to HTML 4.0 are not supported by all browsers. 



Table B-26 Miscellaneous 



Tag Name 


Tag 




Notes 




- Prompt 


<ISINDEX PROMPT=^D 

11 * * * II 


HTML 2.0. Text to prompt 
input 


Base Window Name 


<BASE TARGET = 


HTML 2.0. Must 
header 


be in 


Other Content 


<NOSCRIPT> 
</NOSCRIPT> 


HTML 4.0. If scripts not 
supported 


Base Window Name 


<BASE TARGET = 

II * * * II 


HTML 4.0. Must 
header 


be in 


Bidirect Off 


<BDO DIR=LTR | RTL> 
</BDO> 


HTML 4.0. For certain 
character sets 



DropBooks 



Index 



Numerics 



1-2-3 Publish tool 

creating home page with, 66-70 

launching, 65-66 

overview, 63 

preparing to use, 64-65 
2Cool Animations Web sites, 303 
56K access speed, 339 



absolute address 

defined, 339 

versus relative, 142 
accents, 211 
access speeds 

affecting Web publishing, 270 

broadband, 339 

cable modems, 340 

comparing download time among, 209 
56K, 339 

graphics download concerns, 207-208 
accounts 

registering for Google, 50-54 

registering for Yahoo!, 37-40 
accuracy 

on eBay, 104 

importance of, 184 
addressing 

absolute, 142-143, 339 

relative, 142-143, 291, 344 
advertising, using animated, 303 
alt tags, using with graphics, 211-212 
AltaVista, image search feature, 205 



America Online (AOL). See AOL 
anchors 

creating graphical links with, 213-214 
defined, 339 
function of, 132 

linking to files within same Web page 
with, 235-236 

understanding in HTML, 141-143 

using with graphics, 211 

using with links, 230 
AngelFire Web hosting company, 
researching home page design 
on, 254 
animated GIFs 

adding to Web pages, 304-305 

creating, 305-307 

defined, 339 

finding, 303-304 

overview, 215, 301-303 

photo-, 302 

resources for, 217 
Animations Factory, 303 
AOL (America Online) 

accessing Web through, 10 

adding guestbooks in, 317 

allowing free server space, 283 

considerations when choosing, 60-62 

creating free personal Web 
pages with, 35 

creating home page with 1-2-3 Publish 
tool, 66-70 

editing with Easy Designer, 70 

elements of Web publishing service, 
63-64 

versus GeoCities, 63 
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AOL (America Online) (continued) 
lau nching 1-2-3 Publish from, 65-66 
r2-3 Publish tool, 



researching home page design on 

Hometown, 254 
starting with, 59-60 
using SeaMonkey Composer with, 153 
using site counters with, 315 
AOL Hometown Web pages, 

researching, 64 
appearance 
of business Web sites, 20-21 
changing in Google Page Creator, 55-56 
controlled by browser's preferences, 

353, 357, 362 
selecting with 1-2-3 Publish tool, 67 
tags for author specifying, 
353,357,362-363 
Apple Macintosh, system requirements 

for SeaMonkey Composer, 156 
Apple QuickTime 
adding video files from, 309-311 
defined, 344 
overview, 308 
Apple QuickTime VR 
creating photo-animated GIFs, 302 
defined, 344 
attributes, 339 
audience 
avoiding limiting, 331-332 
catching with focused purpose, 26-27 
focusing on target, 325-326 
knowing, 27-28 
audio files, adding MP3, 311-312 
author METAtag, 178 



B 



backgrounds, tags for, 358 
bandwidth, multimedia problems with, 
300-301 



The Bare Bones Guide to HTML Web site 

(Werbach), 349-350 
Berners-Lee, Tim (inventor of HTML), 15 
beta, 49 
Bigstep 

aiding Web site creation, 278 

researching home page design on, 254 
Blogger (Google) 

adding blog content in, 97-101 

setting up blogs with, 91-97 
Blogger Help Group, joining, 101 
blogosphere, 88 
blogs 

adding content to in Blogger, 97-101 

choosing/entering addresses for, 95-96 

creating Web sites for, 19 

defined, 339 

finding for reading, 89 

finding software for, 90 

overview, 87-88 

publishing photos to, 76 

setting up with Blogger, 91-97 
body, adding with HTML tags, 137-138 
body tags, 131 
bold 

formatting content in Blogger as, 99 

formatting with HTML, 186 
bold tags, function of HTML tags for, 132 
books. See also specific titles 

about eBay, 104 

selling on eBay, 106-107 
borders, placing around graphics, 221 
borrowing, HTML documents, 125 
breaks, tags for, 354, 357, 364-365 
broadband 

choosing ISPs with, 60-61 

defined, 339 

uploading photos with, 73 
broken links 

preventing, 236-237 

problems from, 230 
browsers. See Web browsers 



Index 



Building a Web Site For Dummies 
(CrowderY 316-317 

defined, 138 

tags for, 354, 365-366 

using, 189 
burnout, blogging, 90 
business Web sites 

AOL hosting, 283 

overview, 20-22 

versus personal, 168 

on Yahoo!, 34-35 
buttons, using animated, 302 

•C« 

cable modems, 340 

carriage returns, HTML handling, 185 

Cascading Style Sheets (CSS) 

defined, 340 

overview, 320 
case sensitivity 

with filenames, 127 

of HTML tags, 129 

naming Web files with, 173 
CDs, selling on eBay, 107 
CGI (Common Gateway Interface) scripts 

adding forms with, 317-319 

defined, 340 

using SeaMonkey Composer with, 154 
character formatting, 186-187 
Choose File dialog box (Flickr), locating 

images with, 79-80 
clickable image maps 

creating, 217-218 

defined, 340 

overview, 215 
clothing, selling on eBay, 107 
Collier, Marsha 

eBay For Dummies, 104 

Starting an eBay Business For 
Dummies, 104 



colors 

designing poor combinations of, 
251-252 

download speed issues with, 208 

formatting text with, 188 

GIF conversion concerns with, 201 

tags for, 358 

Web-safe, 204 
comments, adding to photos, 84-85 
Common Gateway Interface (CGI) scripts 

adding forms with, 317-319 

defined, 340 

using SeaMonkey Composer with, 154 
compressing, files for transfer, 291 
CompuServe 

access to AOLs publishing tool from, 62 

creating home page with 1-2-3 Publish 
tool, 66-70 

editing with Easy Designer, 70 

versus GeoCities, 63 

launching 1-2-3 Publish from, 65 

preparing to use 1-2-3 Publish tool, 
64-65 

using SeaMonkey Composer with, 153 
computer screens, challenges reading 

from, 182 
computers. See personal computers 

(PCs) 
consistency 
importance of design, 250 
importance of in URLs, 272-274 
importance of throughout Web 
sites, 262 
consulting services 
considerations in hiring, 288-289 
hiring, 278 

offered by Web hosting services for, 284 
content 

adding in Google Page Creator, 57 
creating Web site, 267-268 
content pages, importance of simplicity 
in, 247 

content-type METAtags, 177-178 
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Cool HTML 4 For Web Pages (Taylor), 2 1 1 
copyright issues 

lide to HTML Web site 
1-350 

multimedia problems with, 301 
obtaining graphics, 205, 208 
using animated GIFs, 304 
Creating Web Graphics For Dummies 

(Smith and Frazier), 199 
credit cards, using for eBay, 110 
Crowder, David A. {Building a Web Site 

For Dummies), 316-317 
CSS (Cascading Style Sheets) 
defined, 340 
overview, 320 
cyberstores, setting up/selling from, 289. 
See also eBay 



Dashboard, Blogger, 100 
data transfer 

GeoCities sites limiting, 36 

Web hosting services charging fees 
for, 285 I 
database interactivity, 320 
Dean, Howard (presidential candidate), 

blogging, 88 
debit cards, using for eBay, 1 10 
definition lists 

creating, 140 

defined, 139, 340 

tags for, 354, 365-366 

using, 189-190 
description METAtag, 178 
descriptions, adding to photos, 83 
design 

color combination problems, 251-252 
errors creating slow-loading pages, 251 
five-step process, 253-254 
importance of consistency in, 
248-250, 262 



importance of simplifying, 24-25, 

246-248 
overall impression of page, 245 
overview, 246 
researching others', 254 
text size problems with, 252-253 
using tables for layout purposes, 

257-258 

Developing eBay Business Tools For 
Dummies (Kaufeld and Harvey), 
104, 106 
DHTML (Dynamic HTML) 
defined, 340 
overview, 321 
dialup access, AOL offering, 61 
Digital Subscriber Line (DSL) 
defined, 340 
ISP access through, 61 
display names, choosing for Blogger, 93 
display resolution, color issues with, 204 
divider styles, selecting in 1-2-3 Publish, 
67-68 

dividers, tags for, 185, 354, 357, 364-365 
documents, plain text, 123, 134. See also 

HTML documents 
domain names 
defined, 340 

evaluating Web hosting services 

for, 284 
obtaining, 276 
of URLs, 11, 12 
download speed 
comparing various access speeds, 209 
considerations of, 27 
evaluating Web hosting services 

for, 284 

graphics issues with, 207-209 
simplicity of design for, 246-247 
downloaded video files, versus 

streaming video, 309 
downtime, evaluating Web hosting 
services for, 285 



Index 375 



drop caps, using animated, 302 
DSL (Digital Subscriber Line) 




DVDs, selling on eBay, 107 
Dynamic HTML (DHTML) 
defined, 340 
overview, 321 



Easy Designer 

editing with, 70 

overview, 63-64 
eBay 

books about, 104 

choosing items to sell on, 106-108 

completing sales on, 117-118 

key knowledge points about, 104-105 

overview, 103 

posting items on, 112-117 

registering as seller with, 108-1 1 1 

selling fees, 106 
eBay For Dummies (Collier), 104 
eLance, finding consultants through, 278 
e-mail 

defined, 341 

preparing accounts for mailto links, 240 
using addresses for Blogger, 93 
using addresses with mailto links, 241 
using Google accounts, 52-53 
entertainment Web sites, 22-23 
extensible Markup Language (XML), 321 
eye fatigue, from reading computer 
screens, 182 



family, including on home pages, 165-167 
feedback 



getting on Web sites, 295 
importance of, 329 



fees 

eBay selling, 106 

paying eBay, 111 
56K access speed, 339 
file extensions 

for HTML documents, 127 

naming Web files with, 173 
File Manager, 64 
File Transfer Protocol (FTP) 

defined, 341 

transferring files for publishing with, 
291-293 

File Transfer Protocol (FTP) sites, 

connecting to, 292-293 
filenames 

considerations for, 127 

creating Web, 173 
files 

adding MP3 audio, 311-312 
adding QuickTime video, 309-311 
creating blank for HTML, 134 
downloaded video versus streaming 

video, 309 
linking to on another server, 233 
linking to on same server, 

234-235 
multimedia, 307-309 
preparing for transfer for publishing, 

290-291 

space of text versus graphics, 201 

transferring using online services, 
293-294 

transferring with FTP, 291-293 
final value fee, on eBay, 106 
firewalls 

business Web site access 
with, 21 

defined, 341 
flagging 

offensive material, 332 

offensive photos, 83 
flaming, avoiding, 332 
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Flickr 
advanced use of, 85 

LJ\J\J t\*3>76 

modifying photos on, 82-85 
popularity of, 73 
potential problems with, 77-78 
privacy settings in, 80-81 
uploading photos to, 78-82 
folders 

preventing broken links with, 236 

storing HTML files in, 176 
follow-through, after eBay sales, 105 
font size, formatting, 186 
formatting 

content in Blogger, 98-99 

graphics, 206-207 

with HTML, 122-123 

tags for, 353, 357, 362-363 

text in HTML, 192-193 

text in SeaMonkey Composer, 196 

Web text, 185-187 
forms 

adding, 317-319 

as alternative to mailto links, 241 
creating interactivity with, 314 
defined, 341 

SeaMonkey Composer supporting, 154 
tags for, 355-356, 366-367 
frames 
challenges of, 258-259 
overview, 255 

with SeaMonkey Composer, 155 
tags for, 368-370 
fraud, on eBay, 105 

Frazier, Peter {Creating Web Graphics For 

Dummies}, 199 
free Web publishing services. See specific 

Web publishing services 
free Web server space, using, 286-287 



free Web tools, understanding HTML 

for, 122 
freeware, 341 

FTP (File Transfer Protocol) 
defined, 341 

transferring files for publishing with, 
291-293 

FTP (File Transfer Protocol) sites, 
connecting to, 292-293 

•6 • 

gating factor, of Web servers, 286 
GeoCities 
adding guestbooks in, 317 
advantages of starting with, 32 
versus AOL, 63 
building Web site on, 40-42 
creating Web pages with Yahoo! 

PageWizards, 45-48 
launching Yahoo! PageWizards with, 

43-45 
popularity of, 31-32 
preparing to create Web site with, 

36-37 
registering for, 37-40 
researching home page design on, 254 
researching sites on, 33-34 
using site counters with, 315 
Yahoo! terms of service restrictions for, 

34-36 

GIF (Graphic Interchange Format) 

graphics format. See also animated 
GIFs; interlaced GIFs; 
transparent GIFs 

creating clickable image maps, 217-218 

defined, 341 

versus JPEG, 200-203 
Google 

image search feature, 205 

overview, 49 



Index 377 




privacy policies, 54 
registering for account with, 50-54 
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in, 97-101 
setting up blog with, 91-97 
Google Page Creator 
with beta tag, 49-50 
creating Web page with, 54-57 
overview, 50 
Graphic Interchange Format (GIF) 
graphics format. See also 
animated GIFs; interlaced GIFs; 
transparent GIFs 
advanced techniques, 215 
creating clickable image maps, 217-218 
defined, 341 
versus JPEG, 200-203 
Graphical User Interface (GUI), 341 
graphics. See also images; photos 
advanced GIF techniques, 215-218 
avoiding abusing, 333 
browser standards for, 203 
creating, 206 

creating links from, 213-214 
download speed concerns with, 

207-208 
easing upload of, 200 
flowing text around, 220-221 
formatting properly, 206-207 
issues with adjusting size of, 218-219 
most common mistakes using, 209-210 
obtaining online, 205 
overview, 199-200 
placing borders around, 221 
placing in HTML, 224-226 
placing in SeaMonkey Composer, 

222-224 
space of versus text, 201 
tags for, 354, 357, 363-364 
time-consuming nature of, 215 
using GIF versus JPEG formats, 200-203 



using in HTML, 210-212 

value of using, 328 
Graphics File Formats FAQs, 206 
gratuitous sex and violence, on Web 

sites, 23 
guestbooks 

adding, 317 

computer programming for, 315 
overview, 314 
GUI (Graphical User Interface), 341 



H 



Harvey, Tim (Developing eBay Business 

Tools For Dummies), 104, 106 
heading tags 

formatting with, 186 

function of, 131-132 
headings 

adding with HTML tags, 137-138 

formatting, 186 
hexadecimals, 341 
hit counters 

monitoring Web site usage with, 22, 278 

overview, 314 

using, 315-316 
hit, defined, 342 
home pages 

content for work-related, 167-168 

creating initial page with HTML, 
169-172 

creating initial page with Web page 

editors, 173-177 
defined, 13, 342 
ideas for content, 163-164 
identity theft concerns, 167 
including personal information and 

interests on, 164-167 
researching design of, 254 
Homestead, researching home page 

design on, 254 
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Hometown (AOL), researching home 
age design on, 254 

aSr^Slody to, 137-138 
adding lists to, 138-140 
adding meta-information to, 135-137 
creating, 126-127 
inserting links in, 144-145 
previewing, 128 
reasons for using lists in, 188 
using lists in, 189-190 
viewing, 125, 194-195 
viewing in browsers, 146-148 
HTML For Dummies (Tittel), 123 
HTML 4 For Dummies (Tittel), 2 1 1 
HTML 4.01,342 

HTML (HyperText Markup Language). 

See also HTML documents; 

HTML tags 
adding links in, 237-238 
adding META tags with, 178-179 
adding MP3 audio files with, 312 
advances in, 148 
anchors, 141-143 
basic rules for using, 129-130 
challenges of entering text in, 191-192 
contributing to online writing style, 

181-182 

converting Web site content to, 267 
creating blank file for, 134 
creating graphical links with, 213-214 
creating initial page with, 169-172 
creating mailto links in, 242 
creating simple tables in, 256-257 
creating Web page with, 133-134 
defined, 342 
defining Web, 10-11 
embedding QuickTime content with, 
310-311 

entering and formatting text in, 192-193 
handling carriage returns and line 
breaks, 185 



making lists in, 193-194 
placing graphics in, 224-226 
SeaMonkey Composer using, 153 
understanding, 122-123 
understanding function of, 124 
using graphics in, 210-212 
using on Blogger Posting page, 98-99 
using quotes with, 144 
value of knowing basics, 121-122 
version 4.01, 342 
versions of, 350-351 
viewing, 15 
HTML tags. See also META tags 
adding to photos, 76, 80, 83 
allowing appearance to be controlled 

by browser's preferences, 

353, 357, 362 
for author specifying appearance, 

353, 357, 362-363 

for backgrounds and colors, 358 
basic rules for using, 129-130 
defined, 13, 345 

for dividers/breaks, 354, 357, 364-365 

formatting with, 122-123 

for forms, 355-356, 366-367 

for frames, 368-370 

for headings, 186 

for line breaks, 185 

for links and graphics, 

354, 357, 363-364 
for lists, 189, 365-366 

matched by SeaMonkey Composer, 152 

miscellaneous, 356, 360-361, 370 

necessary in all HTML documents, 352 

with 1-2-3 Publish, 68 

for paragraphs, 185 

for sounds, 363-364 

for special characters, 355 

for tables, 358-360, 367-368 

ten important, 130-133 

types of, 133 

using spell checkers with, 161 
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HTML tools, creating HTML 
documents in, 127 

ansfer Protocol) 
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defining Web, 10 
humanicons, using, 302 
hype, lack of on Web, 183 
hyperlinks. See links 
hypertext, connection with links, 229 
HyperText Markup Language. See HTML 



icons 

defined, 211 

using animated, 302 
identity theft, home page concerns 

about, 167 
image map. See clickable image maps 
image tags 

adding animated GIFs with, 304-305 

function of, 133 

placing graphics with, 225-226 

using graphics with, 210-214 

using with links, 231 
images. See also graphics; photos 

adding with 1-2-3 Publish tool, 67 

preparing for GeoCities Web site, 37 
improvements, planning for, 29 
informal tone, of online writing, 184 
insertion fee, on eBay, 106 
Integrated Services Digital Network 

(ISDN), 342 
interactivity 

database, 320 

easy options, 314-315 

overview, 313 
interests 

including family on home pages, 166 
including personal on home pages, 
164-165 

including professional on home 
pages, 168 



interlaced GIFs 

overview, 215 

usefulness of, 203 
Internet 

defined, 342 

function of, 10-11 
Internet addresses. See URLs (Uniform 

Resource Locators) 
Internet Protocol (IP), 342 
Internet Service Providers (ISPs). 
See also specific ISPs 

accessing Web through, 10 

choosing, 60-62 

defined, 343 

offering Web server space, 287 
providing free personal Web 
pages, 35 
intranet, 343 

ISDN (Integrated Services Digital 

Network), 342 
italics 

formatting content in Blogger, 99 
formatting content with HTML 

tags, 186 
function of HTML tags for, 132 



Java, 343 
JavaScript 

defined, 343 

overview, 320 
JavaScript For Dummies 

(Vander Veer), 320 
jewelry, selling on eBay, 107 
JPEG (Joint Photographic Experts 
Group) graphic format 

defined, 343 

versus GIF, 200-203 
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Droptote 



sloping eBay Business 
\ies~), 104, 106 
Kent, Peter (Search Engine Optimization 

For Dummies), 178 
keyword METAtag, 178 
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languages. See also markup languages; 
page description languages 

choosing ISPs offering different, 62 

including multiple, 335 

offering non-English Web pages, 268 
layout 

changing in Google Page Creator, 55 

determining page, 265 
line breaks 

HTML handling, 185 

tags for, 354, 357, 364-365 
linking tags, 133 
links 

adding in Blogger, 99 
adding in HTML, 237-238 
adding in 1-2-3 Publish, 68 
adding in SeaMonkey Composer, 

238-240 
anchors, 141-143 
broken, 230, 236-237 
choosing to include in Web site, 266 
color recommendations, 188, 251-252 
creating graphical, 213-214 
creating mailto in HTML, 242 
creating mailto in SeaMonkey 

Composer, 242-243 
defined, 343 

to files on another server, 233 
to files on same server, 234-235 
including family favorites on home 
pages, 167 



including personal favorites on home 

pages, 165 
inserting in HTML documents, 144-145 
mailto, 240-241 
overview, 229-230 
on personal Web sites, 18 
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pathname 

defined, 344 

of URLs, 11-12 
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entering and formatting in HTML, 

192- 193 

entering and formatting in SeaMonkey 

Composer, 195-196 
flowing around graphics, 220-221 
formatting Web, 185-187 
HTML tags formatting/describing role 

of, 133 
links, 231 



Creating Web Pages For Dummies, 8th Edition 



text (continued) 
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